Grid layout (LazyVGrid, LazyHGrid) in iOS Swift - Mini App: Build & Ship

Build: Photo Gallery

A screen that shows a grid of photos using a vertical lazy grid. Each photo is a colored square with a number label. The grid scrolls vertically.

Target UI

Photo Gallery

+-------------------------+
| [1] [2] [3] [4] [5]    |
| [6] [7] [8] [9] [10]   |
| [11][12][13][14][15]   |
| ...                     |
+-------------------------+

Use LazyVGrid with 5 columns

Display 20 colored squares labeled 1 to 20

Each square is 60x60 points with rounded corners

Grid scrolls vertically

Use SwiftUI

Starter Code

iOS Swift

import SwiftUI

struct PhotoGalleryView: View {
    let columns = [
        // TODO: Define 5 grid columns here
    ]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns) {
                // TODO: Add 20 colored squares with labels
            }
            .padding()
        }
    }
}

struct PhotoGalleryView_Previews: PreviewProvider {
    static var previews: some View {
        PhotoGalleryView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

struct PhotoGalleryView: View {
    let columns = Array(repeating: GridItem(.fixed(60), spacing: 10), count: 5)
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 10) {
                ForEach(1...20, id: \.self) { number in
                    ZStack {
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color(hue: Double(number) / 20.0, saturation: 0.7, brightness: 0.8))
                            .frame(width: 60, height: 60)
                        Text("\(number)")
                            .font(.headline)
                            .foregroundColor(.white)
                    }
                }
            }
            .padding()
        }
    }
}

struct PhotoGalleryView_Previews: PreviewProvider {
    static var previews: some View {
        PhotoGalleryView()
    }
}

We define 5 columns using GridItem(.fixed(60)) to make each column 60 points wide. The LazyVGrid arranges items vertically in these columns. We loop from 1 to 20 to create 20 squares. Each square is a rounded rectangle with a color that changes hue based on the number, making the grid colorful. The number is shown centered in white text. The grid scrolls vertically inside a ScrollView. Padding and spacing keep the layout neat.

Final Result

Completed Screen

Photo Gallery

+------------------------------------------------+
| [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]                   |
| [ 6 ] [ 7 ] [ 8 ] [ 9 ] [10 ]                   |
| [11 ] [12 ] [13 ] [14 ] [15 ]                   |
| [16 ] [17 ] [18 ] [19 ] [20 ]                   |
|                                                |
| (scrollable vertically)                         |
+------------------------------------------------+

User can scroll vertically to see all 20 squares

Each square is a colored box with a number label

Grid adjusts spacing evenly with 5 columns

Stretch Goal

Add a toggle button to switch between vertical and horizontal grid layouts using LazyVGrid and LazyHGrid.

💡 Hint

Use a @State variable to track layout mode. Use LazyVGrid for vertical and LazyHGrid for horizontal. Change columns and rows accordingly.