Grid View / SwiftUI

Short tutorial on how to create a structured grid View with SwiftUI

Difficulty: Beginner | Easy | Normal | Challenging

Environment : Xcode 14.3, iOS 16 & SwiftUI

Full code at the end of the article

Create new Xcode Project

Open Xcode > App template > Select the SwiftUI Life Cycle and call it GridApp

Create a Model

We will define a model struct to represent the data we want to display in our grid. For this tutorial, we will create a simple Item struct.

Go ahead and create a new swift file, call it GridView. Then, copy the code below right over the struct GridView

struct Item: Identifiable {
 let id = UUID()
 let name: String
}

Create a Grid View Layout

In SwiftUI, you can create a grid layout using LazyVGrid or LazyHGrid. For this tutorial, let’s use LazyVGrid to create a vertical grid.

struct GridView: View {
 let items: [Item]
 
 var body: some View {
 ScrollView {
 LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
 ForEach(items) { item in
 Text(item.name)
 .frame(maxWidth: .infinity, maxHeight: .infinity)
 .background(Color.blue)
 .cornerRadius(8)
 .padding(10)
 }
 }
 .padding()
 }
 .navigationTitle(“Grid View”)
 }
}

Preview the Grid View

Now, go back in your ContentView.swift, create some sample data and preview the grid view passing the items parameters:

struct ContentView: View {
 let items = [
 Item(name: “Item 1”),
 Item(name: “Item 2”),
 Item(name: “Item 3”),
 Item(name: “Item 4”),
 Item(name: “Item 5”),
 Item(name: “Item 6”),
 Item(name: “Item 7”),
 Item(name: “Item 8”),
 Item(name: “Item 9”)
 ]
 
 var body: some View {
 NavigationView {
 GridView(items: items)
 }
 }
}

Adjust Grid Layout

You can adjust the number of columns in the grid by changing the columns parameter of LazyVGrid. Additionally, you can customise the appearance like the color, padding and more of the grid items.

Run your app

Build and run your SwiftUI app in the simulator or on a device to see your grid view in action.

Thanks for reading! I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.

Full code below:

// GridView 
import SwiftUI

struct Item: Identifiable {
    let id = UUID()
    let name: String
}

struct GridView: View {
    let items: [Item]
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(), GridItem(), GridItem()]) {
                ForEach(items) { item in
                    Text(item.name)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.red)
                        .cornerRadius(6)
                        .padding(10)
                }
            }
            .padding()
        }
        .navigationTitle("Grid View")
    }
}

// ContentView 
import SwiftUI

struct ContentView: View {
    let items = [
        Item(name: "Item 1"),
        Item(name: "Item 2"),
        Item(name: "Item 3"),
        Item(name: "Item 4"),
        Item(name: "Item 5"),
        Item(name: "Item 6"),
        Item(name: "Item 7"),
        Item(name: "Item 8"),
        Item(name: "Item 9"),
        Item(name: "Item 10"),
        Item(name: "Item 11"),
        Item(name: "Item 12")
    ]
    
    var body: some View {
        NavigationView {
            GridView(items: items)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}