Grid

Grid calculates row heights and column widths using all of its children, making it suitable for precisely aligned two-dimensional layouts.

import {
  Divider, Grid, GridRow, Modifier, Text,
} from "onescript/views"

<Grid
  alignment="leading"
  horizontalSpacing={12}
  verticalSpacing={8}
>
  <GridRow>
    <Text modifier={Modifier.gridColumnAlignment("trailing")}>Name</Text>
    <Text>OneScript</Text>
  </GridRow>
  <Divider modifier={Modifier.gridCellUnsizedAxes("horizontal")} />
  <GridRow>
    <Text>Platform</Text>
    <Text>iOS</Text>
  </GridRow>
</Grid>

A direct child of Grid spans the entire row. Each direct child of GridRow occupies one cell.

Prop	Type	Description
`alignment`	`Alignment`	Default cell alignment. Defaults to `"center"`.
`horizontalSpacing`	`number`	Horizontal cell spacing in pt. Uses system spacing when omitted.
`verticalSpacing`	`number`	Vertical cell spacing in pt. Uses system spacing when omitted.
`children`	view or view array	Grid rows and direct children that span a row.

GridRow

GridRow defines one row inside a Grid. Each direct child occupies one grid cell in column order.

Prop	Type	Description
`alignment`	`"top"` \| `"center"` \| `"bottom"`	Vertical alignment for this row. Inherits the Grid alignment when omitted.
`children`	view or view array	Cells arranged in column order.

Grid modifiers

The following modifiers take effect when the modified view participates in a Grid layout.

gridCellColumns

gridCellColumns(count) sets the number of columns occupied by the current view inside a GridRow. count must be a positive integer.

import { Grid, GridRow, Modifier, Text } from "onescript/views"

<Grid>
  <GridRow>
    <Text modifier={Modifier.gridCellColumns(2)}>Spans two columns</Text>
  </GridRow>
</Grid>

gridCellAnchor

gridCellAnchor(anchor) sets the alignment anchor of the current cell using a UnitPoint.

import { Grid, GridRow, Modifier, Text, UnitPoint } from "onescript/views"

<Grid>
  <GridRow>
    <Text modifier={Modifier.gridCellAnchor(UnitPoint.bottomTrailing)}>Content</Text>
  </GridRow>
</Grid>

gridCellUnsizedAxes

gridCellUnsizedAxes(axes) prevents a Grid from offering extra size to the current view on the selected axes. axes accepts "horizontal", "vertical", or "all".

import { Divider, Grid, GridRow, Modifier, Text } from "onescript/views"

<Grid>
  <GridRow><Text>A</Text><Text>B</Text></GridRow>
  <Divider modifier={Modifier.gridCellUnsizedAxes("horizontal")} />
</Grid>

gridColumnAlignment

gridColumnAlignment(alignment) sets the horizontal alignment of the column containing the current cell. Declare the modifier on one cell in each column.

import { Grid, GridRow, Modifier, Text } from "onescript/views"

<Grid>
  <GridRow>
    <Text modifier={Modifier.gridColumnAlignment("trailing")}>Name</Text>
    <Text>OneScript</Text>
  </GridRow>
</Grid>