Skip to main content
Grid(children: Component[]): Component;
Grid(props: { alignment?: Alignment; horizontalSpacing?: number; verticalSpacing?: number }, children: Component[]): Component;
​
children
Component[]
required
An array of GridRow components. Each GridRow defines one row in the grid. The number of columns is determined by the row with the most children.
​
props
object
Configuration options for the grid.

​
Support

​
Usage

​
Basic grid

Grid([
    GridRow([Text("Name"), Text("Value")]),
    GridRow([Text("Width"), Text("100")]),
    GridRow([Text("Height"), Text("200")])
])

​
With spacing

Grid({ horizontalSpacing: 16, verticalSpacing: 8 }, [
    GridRow([
        Text("Label").bold(),
        Text("Amount").bold()
    ]),
    Divider(),
    GridRow([Text("Apples"), Text("$3.00")]),
    GridRow([Text("Oranges"), Text("$2.50")])
])

​
Spanning columns

Use the .gridCellColumns() modifier to span a cell across multiple columns: 
Grid({ horizontalSpacing: 12, verticalSpacing: 8 }, [
    GridRow([
        Text("Full width header")
            .font("headline")
            .gridCellColumns(2)
    ]),
    GridRow([Text("Left"), Text("Right")])
])

​
With alignment

Grid({ alignment: "leading", verticalSpacing: 12 }, [
    GridRow([
        Image({ systemName: "star.fill" }),
        Text("Favorites")
    ]),
    GridRow([
        Image({ systemName: "heart.fill" }),
        Text("Liked")
    ])
])

​
Notes

  • Grid determines the number of columns from the row with the most children. Rows with fewer children leave trailing cells empty.
  • Use Divider directly as a child (not inside a GridRow) to insert a horizontal separator that spans the full grid width.
  • Grid cell modifiers (.gridCellColumns(), .gridCellAnchor(), .gridCellUnsizedAxes(), .gridColumnAlignment()) control individual cell layout behavior.

​
See Also

  • GridRow — defines a row within a grid
  • VStack — one-dimensional vertical layout
  • HStack — one-dimensional horizontal layout