These iOS-only modifiers refine how individual cells behave inside a Grid. Use them to span columns, anchor a cell within its allocated space, override column-wide alignment, or opt out of grid sizing on an axis.
Apply each modifier to the cell view inside a GridRow. gridColumnAlignment is special: applied to one cell, it sets the alignment of the entire column.
gridCellColumns
Makes a grid cell span multiple columns.
.gridCellColumns(count: number): Component
The number of columns this cell should span.
Grid([
GridRow([
Text("Full Width Header")
.font("headline")
.gridCellColumns(3)
]),
GridRow([
Text("Col 1"),
Text("Col 2"),
Text("Col 3")
])
])
Grid([
GridRow([
Text("A"),
Text("B"),
Text("C")
]),
GridRow([
Text("Wide Cell")
.gridCellColumns(2),
Text("D")
])
])
gridCellAnchor
Sets the anchor position for a grid cell within its allocated space.
.gridCellAnchor(anchor: UnitPoint): Component
The anchor point within the cell. A UnitPoint where { x: 0, y: 0 } is the top-leading corner and { x: 1, y: 1 } is the bottom-trailing corner. You can also use string presets like "center", "topLeading", "bottomTrailing", etc. Grid([
GridRow([
Text("Top Left")
.gridCellAnchor("topLeading"),
Text("Center")
]),
GridRow([
Text("A"),
Text("B")
])
])
Grid([
GridRow([
Circle()
.frame({ width: 20, height: 20 })
.foregroundStyle(Color("blue"))
.gridCellAnchor({ x: 0.5, y: 0 })
])
])
gridColumnAlignment
Overrides the horizontal alignment for an entire grid column.
.gridColumnAlignment(guide: HorizontalAlignment): Component
guide
HorizontalAlignment
required
The horizontal alignment for the column. One of "leading", "center", or "trailing".
Grid([
GridRow([
Text("Name"),
Text("Price")
.gridColumnAlignment("trailing")
]),
GridRow([
Text("Widget"),
Text("$9.99")
]),
GridRow([
Text("Gadget"),
Text("$19.99")
])
])
Grid([
GridRow([
Text("Left")
.gridColumnAlignment("leading"),
Text("Center")
.gridColumnAlignment("center"),
Text("Right")
.gridColumnAlignment("trailing")
]),
GridRow([
Text("A"),
Text("B"),
Text("C")
])
])
This modifier is applied to a cell in any row and affects the alignment of the entire column across all rows. You only need to apply it to one cell per column.
gridCellUnsizedAxes
Opts a grid cell out of being sized along specified axes, using its ideal size instead.
.gridCellUnsizedAxes(axes: Axis): Component
The axes along which the cell should use its ideal size instead of the grid-assigned size. See Axis. Grid([
GridRow([
Text("Fixed width")
.gridCellUnsizedAxes("horizontal"),
Text("Flexible")
]),
GridRow([
Text("A"),
Text("B")
])
])
Grid([
GridRow([
Circle()
.frame({ width: 40, height: 40 })
.foregroundStyle(Color("blue"))
.gridCellUnsizedAxes("vertical"),
Text("Description")
])
])
By default, grid cells expand to fill the space allocated by the grid. This modifier lets a cell opt out of that behavior on one or both axes, using its intrinsic (ideal) size instead.
See also
