How it works
A GridRow is a horizontal container that arranges its child views into a single row of cells within a Grid. Use it to group the views that belong on the same line so that the surrounding grid can align their leading and trailing edges into shared columns. Reach for GridRow whenever you need a tabular layout where items in one row line up vertically with items in the rows above and below — the kind of column alignment that an HStack alone can't guarantee across separate stacks.
Place each GridRow inside a Grid
A
GridRowonly takes effect as a direct child of aGrid; the grid coordinates the column widths and the row reads its cells into them. In the example, theGridwraps threeGridRowinstances, and views placed directly under a grid without a row are treated as a single full-width cell, so the rows are what give the layout its columns.Build a row from a view builder
GridRowis initialized with a@ViewBuilderclosure whose child views become the cells of that row, laid out left to right. The header row supplies two cells,Text("Name")andText("Score"), and because each later row also supplies two cells —Text("Ada")/Text("98")andText("Linus")/Text("91")— the grid forms two aligned columns.Let cell count establish the columns
The number of views in a
GridRowdetermines how many columns that row occupies, and the grid sizes each column to fit the widest cell across all rows. Here every row contributes exactly two cells, so the score values stay aligned underText("Score")even though "Ada" and "Linus" have different widths.Apply modifiers to a whole row
Because
GridRowis itself aView, you can attach modifiers to it and they propagate to every cell in that row. The example calls.font(.headline)on the firstGridRowto style both headerTextviews at once, while the data rows keep the grid's default font.
Text to one of the data rows, such as Text("verified") after Text("98"), and watch the Grid grow a third column that the shorter rows leave empty.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct GridRowDemo: View {
var body: some View {
Grid {
GridRow {
Text("Name")
Text("Score")
}
.font(.headline)
GridRow {
Text("Ada")
Text("98")
}
GridRow {
Text("Linus")
Text("91")
}
}
.padding()
}
}