Grid cells

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

number

required

The number of columns this cell should span.

Spanning a header across all columns

Grid([
    GridRow([
        Text("Full Width Header")
            .font("headline")
            .gridCellColumns(3)
    ]),
    GridRow([
        Text("Col 1"),
        Text("Col 2"),
        Text("Col 3")
    ])
])

Two-column span in a three-column grid

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

UnitPoint

required

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.

Positioning a cell at the top-leading corner

Grid([
    GridRow([
        Text("Top Left")
            .gridCellAnchor("topLeading"),
        Text("Center")
    ]),
    GridRow([
        Text("A"),
        Text("B")
    ])
])

Custom anchor point

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

HorizontalAlignment

required

The horizontal alignment for the column. One of "leading", "center", or "trailing".

Right-aligning a column

Grid([
    GridRow([
        Text("Name"),
        Text("Price")
            .gridColumnAlignment("trailing")
    ]),
    GridRow([
        Text("Widget"),
        Text("$9.99")
    ]),
    GridRow([
        Text("Gadget"),
        Text("$19.99")
    ])
])

Mixed column alignments

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

Axis

required

The axes along which the cell should use its ideal size instead of the grid-assigned size. See Axis.

Using ideal width in a grid cell

Grid([
    GridRow([
        Text("Fixed width")
            .gridCellUnsizedAxes("horizontal"),
        Text("Flexible")
    ]),
    GridRow([
        Text("A"),
        Text("B")
    ])
])

Using ideal height in a grid cell

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.

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

gridCellColumns

gridCellAnchor

gridColumnAlignment

gridCellUnsizedAxes

See also

​gridCellColumns

​gridCellAnchor

​gridColumnAlignment

​gridCellUnsizedAxes

​See also

gridCellColumns

gridCellAnchor

gridColumnAlignment

gridCellUnsizedAxes

See also