Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

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
​
count
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
​
anchor
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
​
guide
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
​
axes
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.

​
See also

  • Grid — the grid layout container
  • GridRow — a row within a grid
  • Axis — axis values
  • UnitPoint — anchor point values