Grid layout (LazyVGrid, LazyHGrid) in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a vertical grid with three flexible columns.

iOS Swift

let columns = [GridItem(.[1]), GridItem(.flexible()), GridItem(.flexible())]
LazyVGrid(columns: columns) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Drag options to blanks, or click blank then click option'

Aadaptive

Bfixed

Cspacing

Dflexible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' will make the column a fixed width, not flexible.

Using 'spacing' is not a valid size type.

The flexible size allows the column to expand and fill available space.

2fill in blank

medium

Complete the code to create a horizontal grid with two fixed-size rows.

iOS Swift

let rows = [GridItem(.[1](50)), GridItem(.fixed(50))]
LazyHGrid(rows: rows) {
    Text("Row 1")
    Text("Row 2")
}

Drag options to blanks, or click blank then click option'

Aflexible

Bfixed

Cadaptive

Dspacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flexible' will make rows resize, not fixed.

Using 'adaptive' is for flexible number of items, not fixed size.

The fixed size sets the row height to a constant 50 points.

3fill in blank

hard

Fix the error in the code to create a vertical grid with adaptive columns of minimum 80 points.

iOS Swift

let columns = [GridItem(.[1](minimum: 80))]
LazyVGrid(columns: columns) {
    ForEach(0..<10) { index in
        Text("Item \(index)")
    }
}

Drag options to blanks, or click blank then click option'

Aflexible

Bfixed

Cadaptive

Dspacing

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' or 'flexible' will not adapt the number of columns.

Using 'spacing' is not a valid size type.

The adaptive size creates as many columns as fit with at least 80 points width.

4fill in blank

hard

Fill both blanks to create a horizontal grid with two flexible rows and spacing of 10 points.

iOS Swift

let rows = [GridItem(.[1](), spacing: [2]), GridItem(.flexible())]
LazyHGrid(rows: rows) {
    Text("A")
    Text("B")
}

Drag options to blanks, or click blank then click option'

Aflexible

B20

C10

Dfixed

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fixed' for the first blank will fix the row size.

Using spacing other than 10 will change the gap size.

The first row is flexible and has spacing of 10 points between items.

5fill in blank

hard

Fill all three blanks to create a vertical grid with adaptive columns minimum 100, spacing 15, and padding 20.

iOS Swift

let columns = [GridItem(.[1](minimum: 100), spacing: [2])]
LazyVGrid(columns: columns, spacing: [3]) {
    Text("One")
    Text("Two")
}
.padding(20)

Drag options to blanks, or click blank then click option'

Aadaptive

B10

C15

Dflexible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flexible' instead of 'adaptive' will not adapt column count.

Using wrong spacing values changes the gaps.

The columns use adaptive size with minimum 100 points, spacing 15 points between items, and the grid has 15 points spacing vertically. Padding of 20 points is added around the grid.

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