Grid

A grid is a layout container that arranges views into a table-like structure with rows and columns.

public func Grid(
  alignment: Alignment = .center,
  horizontalSpacing: CGFloat = 0,
  verticalSpacing: CGFloat = 0,
  @FastArrayBuilder<GridRowElement> rows: () -> [GridRowElement] = { [] },
) -> Element & Layout

public func GridRow(
  alignment: VerticalAlignment? = nil,
  @FastArrayBuilder<Element> children: () -> [Element]
) -> GridRowElement

var body: Layout {
  Grid {
    GridRow {
      view1
      view2
      view3
    }
    GridRow {
      view4
      view5
      view6
    }
  }
}

Alignment

Each grid view has two alignment properties: horizontal and vertical alignment. This controls the position of the view within its cell.

There are four main alignment types:

Grid Alignment - Sets the initial horizontal and vertical alignment for all views within the grid, which is .center by default.

Row Alignment - Overrides the vertical alignment for every view in a specific row.

Column Alignment - Overrides the horizontal alignment for views in a specific column.

Grid Cell Anchor Alignment - Overrides both the horizontal and vertical alignment for an individual view.

Grid Alignment

This serves as the default alignment for all views and is the lowest-priority alignment. It is applied to the grid as a whole and determines how every view within the grid is aligned within its own cell.

var body: Layout {
  Grid(alignment: .top) {
    GridRow {
      view1
      view2
      view3
    }
    GridRow {
      view4
      view5
      view6
    }
  }
}

Row Alignment

Row alignment overrides the vertical alignment for every view in a row. This is the second-highest priority alignment, and it overrides the grid's vertical alignment.

var body: Layout {
  Grid {
    GridRow {
      view1
      view2
      view3
    }
    GridRow(alignment: .bottom) {
      view4
      view5
      view6
    }
  }
}

Column Alignment

Column alignment overrides the horizontal alignment for every view in a column. This is also the second-highest priority alignment, and it overrides the grid's horizontal alignment.

var body: Layout {
  Grid {
    GridRow {
      view1
        .gridColumnAlignment(.leading)
      view2
    }
    GridRow {
      view3
      view4
    }
    GridRow {
      view5
      view6
    }
  }
}

Grid Cell Anchor Alignment

Grid cell anchor alignment applies a horizontal and vertical alignment to a specific view in a grid. This is the highest priority alignment, and it overrides both the horizontal amd vertical alignment of an view.

var body: Layout {
  Grid {
    GridRow {
      view1
      view2
    }
    GridRow {
      view3
      view4
        .gridCellAnchor(.bottomTrailing)
    }
  }
}

Alternatively, you can specify a custom UnitPoint to position the view to a specific point in the cell.

var body: Layout {
  Grid {
    GridRow {
      view1
      view2
    }
    GridRow {
      view3
      view4
        .gridCellAnchor(UnitPoint(x: 0.5, y: 1.0))
    }
  }
}

Spacing

A fixed amount of spacing can be added between rows and columns using the verticalSpacing parameter for spacing between rows and the horizontalSpacing parameter for spacing between columns.

var body: Layout {
  Grid(verticalSpacing: 8) {
    GridRow {
      view1
      view2
      view3
    }
    GridRow {
      view4
      view5
      view6
    }
  }
}

var body: Layout {
  Grid(horizontalSpacing: 8) {
    GridRow {
      view1
      view2
      view3
    }
    GridRow {
      view4
      view5
      view6
    }
  }
}

verticalSpacing and horizontalSpacing can be used together.

var body: Layout {
  Grid(horizontalSpacing: 8, verticalSpacing: 8) {
    GridRow {
      view1
      view2
      view3
    }
    GridRow {
      view4
      view5
      view6
    }
  }
}

Performance Considerations

Grid may measure cells up to 3 times. Second measurement occures when a text needs to be broken into multiple lines. Third measurement occures when a multiline text is truncated.

note

Grid layout does not support gridCellColumns and gridCellUnsizedAxis modifiers.