Grid
Beta notice: This page is being built.Edit on GitHub(opens in new tab)
Grid supports fixed columns or responsive tracks with columns={{ minWidth: 240, max: 3 }}. Responsive tracks reflow with the container width; use one-column or full GridSpan items with them. For unequal fixed-column layouts, collapseBelow={768} switches to a single column at narrow View viewport widths and makes spanning children full-width.
This is a LongLink-specific component.
Example
Properties
| Grid - Properties |
|---|
children Grid content.ReactNode |
columns Fixed column count or responsive columns with minWidth and an optional max.number | { minWidth: number; max?: number; repeat?: "fill" | "fit"; } |
collapseBelow View width in pixels at or below which all items use one column.number |
gap Spacing between all items.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
rowGap Row spacing; overrides `gap` for the row axis.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
columnGap Column spacing; overrides `gap` for the column axis.0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 |
align Vertical alignment of items."start" | "center" | "end" | "stretch" |
justify Horizontal alignment of items."start" | "center" | "end" | "stretch" |
width Container width. Numbers are treated as pixels, strings are used as-is.string | number |
height Container height. Numbers are treated as pixels, strings are used as-is.string | number |
maxWidth Maximum container width. Numbers are treated as pixels, strings are used as-is.string | number |
minHeight Minimum container height. Numbers are treated as pixels, strings are used as-is.string | number |
| GridSpan - Properties |
|---|
children Content rendered inside the grid item.ReactNode |
columns Number of columns to occupy, or full to span the entire grid.number | "full" |