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.