Understanding SwiftUI's Grid container

SwiftUI's Grid gives us a way to build two-dimensional layouts without using nested HStack/VStack combinations. The grid aligns items based on columns determined by the content we place inside rows.

Let's look at how it works and when to prefer it over stack combinations.

Architecture & Design Patterns for iOS

This book is a practical guide to essential architectural principles and design patterns for iOS development. It covers strategies for building maintainable apps with Swift and SwiftUI, including dependency injection, navigation, common patterns, and modularization.

LEARN MORE

Grid is a two-dimensional layout where:

• Each GridRow represents one horizontal row.
• Each element inside a row creates or fills a column.
• Columns align automatically across rows.

So if the first row contains three elements, and the second row contains only two, SwiftUI still reserves a third column, keeping everything aligned.

Let's look at an example:

var body: some View {
    Grid(horizontalSpacing: 20, verticalSpacing: 20) {
        ForEach(animals, id: \.id) { animal in
            GridRow(alignment: .top) {
                Text(animal.name)
                    .gridColumnAlignment(.trailing)
                Image(systemName: animal.imageSystemName)
                    .gridColumnAlignment(.center)
                Text(animal.description)
                    .gridColumnAlignment(.leading)
            }
        }
    }
}

Here, each row is aligned with the gridColumnAlignment modifier. This results in the following view:

So a grid is basically a structured HStack/VStack combination - with the important difference for the shared column alignment. So if we want column alignment across multiple rows without manual geometry, Grid is the view to go.

Grid also provides the possibility to let a cell span multiple columns using gridCellColumns(_:). This allows us to create layouts where certain elements such as section headers or wide images stretch across the full row while others remain aligned to their individual columns.

It is worth mentioning, that Grid does not automatically wrap elements to the next line. SwiftUI will place all items in a single row unless we manually create rows. The grid is column-aligned, not space-aware. SwiftUI currently doesn’t provide a built-in flowing grid container.