Grid layout (LazyVGrid, LazyHGrid) in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

How many items are visible in this LazyVGrid?

Consider this SwiftUI code snippet that creates a vertical grid with fixed columns:

let columns = [GridItem(.fixed(100)), GridItem(.fixed(100))]

var body: some View {
  ScrollView {
    LazyVGrid(columns: columns) {
      ForEach(0..<5) { index in
        Rectangle()
          .frame(height: 50)
          .overlay(Text("Item \(index)"))
      }
    }
  }
}

How many grid items will be shown in one full row?

iOS Swift

let columns = [GridItem(.fixed(100)), GridItem(.fixed(100))]

var body: some View {
  ScrollView {
    LazyVGrid(columns: columns) {
      ForEach(0..<5) { index in
        Rectangle()
          .frame(height: 50)
          .overlay(Text("Item \(index)"))
      }
    }
  }
}

A 2

B 1

C 5

D 10

💡 Hint

Count how many columns are defined in the columns array.

The LazyVGrid uses the columns array to define how many columns appear per row. Here, there are 2 columns, so each row shows 2 items.

❓ ui_behavior

intermediate

What happens if you use LazyHGrid with one fixed row?

Given this SwiftUI code:

let rows = [GridItem(.fixed(80))]

var body: some View {
  ScrollView(.horizontal) {
    LazyHGrid(rows: rows) {
      ForEach(0..<4) { index in
        Circle()
          .frame(width: 60, height: 60)
          .overlay(Text("\(index)"))
      }
    }
  }
}

What is the layout behavior of the circles?

iOS Swift

let rows = [GridItem(.fixed(80))]

var body: some View {
  ScrollView(.horizontal) {
    LazyHGrid(rows: rows) {
      ForEach(0..<4) { index in
        Circle()
          .frame(width: 60, height: 60)
          .overlay(Text("\(index)"))
      }
    }
  }
}

A Circles are arranged vertically in a single column, scrollable up and down.

B Circles are arranged in a grid with 4 rows and 1 column.

C Circles overlap each other in the same position.

D Circles are arranged horizontally in a single row, scrollable sideways.

💡 Hint

LazyHGrid arranges items horizontally along rows.

LazyHGrid with one fixed row arranges items side by side horizontally in that row. The ScrollView(.horizontal) allows sideways scrolling if needed.

🧠 Conceptual

advanced

What is the effect of using .adaptive GridItem in LazyVGrid?

In SwiftUI, you can define grid columns like this:

let columns = [GridItem(.adaptive(minimum: 80))]

What does the .adaptive option do in a LazyVGrid?

iOS Swift

let columns = [GridItem(.adaptive(minimum: 80))]

var body: some View {
  LazyVGrid(columns: columns) {
    ForEach(0..<10) { index in
      Rectangle()
        .frame(height: 50)
        .overlay(Text("Item \(index)"))
    }
  }
}

A It fixes the grid to exactly one column of 80 points width.

B It creates as many columns as fit horizontally with at least 80 points width each.

C It creates columns that automatically resize to fill the entire screen width.

D It creates a grid with a fixed number of columns equal to 80.

💡 Hint

Think about how many columns can fit if each column is at least 80 points wide.

The .adaptive option creates as many columns as possible that are at least the minimum width. This makes the grid flexible and responsive.

❓ lifecycle

advanced

When are views inside LazyVGrid created and destroyed?

In SwiftUI, LazyVGrid creates views lazily. What does this mean for the lifecycle of the views inside the grid?

A Views are created only when they appear on screen and destroyed when scrolled off screen.

B All views are created immediately when the grid appears and stay in memory.

C Views are created randomly regardless of visibility.

D Views are created once and never destroyed even if off screen.

💡 Hint

Lazy means views are made only when needed.

LazyVGrid creates views only when they are about to appear on screen, saving memory and improving performance. Views off screen can be destroyed.

🔧 Debug

expert

Why does this LazyVGrid code cause a runtime crash?

Examine this SwiftUI code:

let columns = [GridItem(.fixed(100)), GridItem(.fixed(100))]

var body: some View {
  ScrollView {
    LazyVGrid(columns: columns) {
      ForEach(0..<3) { index in
        Text("Item \(index)")
          .frame(width: 150, height: 50)
          .background(Color.blue)
      }
    }
  }
}

When running, the app crashes with a layout constraint error. Why?

iOS Swift

let columns = [GridItem(.fixed(100)), GridItem(.fixed(100))]

var body: some View {
  ScrollView {
    LazyVGrid(columns: columns) {
      ForEach(0..<3) { index in
        Text("Item \(index)")
          .frame(width: 150, height: 50)
          .background(Color.blue)
      }
    }
  }
}

A Text views cannot have background colors inside LazyVGrid.

B ForEach range is too small to fill the grid, causing a crash.

C The fixed column width (100) conflicts with the child frame width (150), causing layout errors.

D ScrollView must be horizontal for LazyVGrid to work.

💡 Hint

Check if child views fit inside the fixed column widths.

The columns are fixed at 100 points wide, but the child views request 150 points width, which conflicts and causes a runtime layout crash.

Practice

1. What does LazyVGrid do in SwiftUI?

easy

A. Arranges items vertically in columns

B. Arranges items horizontally in rows

C. Creates a single scrollable list

D. Stacks items on top of each other

Solution

1. Step 1: Understand LazyVGrid purpose

   LazyVGrid arranges views vertically in columns, meaning items fill columns top to bottom.

2. Step 2: Compare with other layouts

   LazyHGrid arranges horizontally in rows, so LazyVGrid is vertical columns.

3. Final Answer:

   Arranges items vertically in columns -> Option A

4. Quick Check:

   LazyVGrid = vertical columns [OK]

Hint: Remember V in LazyVGrid means vertical columns [OK]

Common Mistakes:

• Confusing LazyVGrid with LazyHGrid
• Thinking it stacks items horizontally
• Assuming it creates a list

2. Which of the following is the correct way to define a grid with two flexible columns using LazyVGrid?

easy

A. LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... }

B. LazyVGrid(rows: [GridItem(.flexible()), GridItem(.flexible())]) { ... }

C. LazyHGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... }

D. LazyVGrid(columns: GridItem(.fixed(100))) { ... }

Solution

1. Step 1: Check parameter name for LazyVGrid

   LazyVGrid uses the parameter 'columns' to define its grid structure.

2. Step 2: Verify GridItem array for two flexible columns

   Two GridItem(.flexible()) inside an array means two flexible columns.

3. Final Answer:

   LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())]) { ... } -> Option A

4. Quick Check:

   LazyVGrid uses columns array [OK]

Hint: LazyVGrid needs 'columns' parameter as array [OK]

Common Mistakes:

• Using 'rows' parameter with LazyVGrid
• Confusing LazyHGrid with LazyVGrid
• Passing single GridItem without array

3. What will be the layout result of this code snippet?

LazyHGrid(rows: [GridItem(.fixed(50))]) {
  ForEach(0..<3) { i in
    Text("Item \(i)")
  }
}

medium

A. Three items arranged vertically in one column

B. Three items arranged horizontally in one row with fixed height

C. Three items stacked on top of each other with flexible height

D. Syntax error due to missing columns parameter

Solution

1. Step 1: Understand LazyHGrid with rows parameter

   LazyHGrid arranges items horizontally in rows. Here, rows array has one GridItem with fixed height 50.

2. Step 2: Analyze ForEach producing 3 items

   Three Text views will be placed horizontally in one row, each with height 50.

3. Final Answer:

   Three items arranged horizontally in one row with fixed height -> Option B

4. Quick Check:

   LazyHGrid + rows = horizontal rows [OK]

Hint: LazyHGrid uses rows array to set horizontal rows [OK]

Common Mistakes:

• Thinking LazyHGrid arranges vertically
• Confusing fixed height with width
• Expecting syntax error due to columns

4. Identify the error in this SwiftUI grid code:

LazyVGrid(rows: [GridItem(.flexible())]) {
  Text("Hello")
  Text("World")
}

medium

A. Text views cannot be inside LazyVGrid

B. Missing ForEach loop for multiple items

C. GridItem should be .fixed, not .flexible

D. Using 'rows' parameter instead of 'columns' in LazyVGrid

Solution

1. Step 1: Check parameter name for LazyVGrid

   LazyVGrid requires 'columns' parameter, not 'rows'. Using 'rows' causes error.

2. Step 2: Confirm other parts are valid

   Text views can be inside LazyVGrid; ForEach is optional for multiple views.

3. Final Answer:

   Using 'rows' parameter instead of 'columns' in LazyVGrid -> Option D

4. Quick Check:

   LazyVGrid needs 'columns' parameter [OK]

Hint: LazyVGrid uses 'columns', not 'rows' [OK]

Common Mistakes:

• Confusing rows and columns parameters
• Thinking ForEach is mandatory
• Misunderstanding GridItem types

5. You want to create a grid with 3 columns where the first column is fixed width 100, the second is flexible, and the third is adaptive with minimum 80 width. Which code correctly defines the columns array for LazyVGrid?

hard

A. [GridItem(.adaptive(minimum: 80)), GridItem(.fixed(100)), GridItem(.flexible())]

B. [GridItem(.flexible()), GridItem(.fixed(100)), GridItem(.adaptive(minimum: 80))]

C. [GridItem(.fixed(100)), GridItem(.flexible()), GridItem(.adaptive(minimum: 80))]

D. [GridItem(.fixed(100)), GridItem(.adaptive(minimum: 80)), GridItem(.flexible())]

Solution

1. Step 1: Match column order with requirements

   The first column must be fixed width 100, second flexible, third adaptive minimum 80.

2. Step 2: Check each GridItem in options

   [GridItem(.fixed(100)), GridItem(.flexible()), GridItem(.adaptive(minimum: 80))] matches order: fixed(100), flexible(), adaptive(minimum: 80).

3. Final Answer:

   [GridItem(.fixed(100)), GridItem(.flexible()), GridItem(.adaptive(minimum: 80))] -> Option C

4. Quick Check:

   Order and types must match requirements [OK]

Hint: Order of GridItems matches column order [OK]

Common Mistakes:

• Mixing order of GridItems
• Using wrong GridItem types
• Confusing adaptive with flexible