Grid, Asgard Docs

Layout & docking

Lay out content on a responsive grid.

A responsive grid layout built on a 12- (or 24-) column model with breakpoint-aware spans.

Key features:

container and item roles for flexible responsive layouts
Breakpoints xs, sm, md, lg, xl for column spans
spacing, direction, justifyContent, alignItems controls
Offset props (xsOffset, mdOffset, …) for column shifting

Loading preview…

When to use it

Page and dashboard layouts
Responsive form rows
Card and tile galleries
Aligning and distributing items in a row

Properties

Prop	Type	Default	Description
`container`	`boolean`	`false`	Marks this Grid as a flex container for its item children.
`item`	`boolean`	`false`	Marks this Grid as a column item inside a container.
`spacing`	`'none' \| 'small' \| 'normal' \| 'large' \| 'xlarge' \| number`	`'normal'`	Gap between items (preset name or pixels). Applies to containers.
`direction`	`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`	`'row'`	Flex direction of the container.
`wrap`	`'nowrap' \| 'wrap' \| 'wrap-reverse'`	`'wrap'`	Whether items wrap onto multiple lines.
`justifyContent`	`'flex-start' \| 'center' \| 'flex-end' \| 'space-between' \| 'space-around' \| 'space-evenly'`	—	Main-axis alignment of items.
`alignItems`	`'flex-start' \| 'center' \| 'flex-end' \| 'stretch' \| 'baseline'`	—	Cross-axis alignment of items.
`columns`	`12 \| 24`	`12`	Total columns in the grid system.
`xs`	`1..12 \| 'auto'`	—	Column span at the smallest breakpoint (and up).
`sm`	`1..12 \| 'auto'`	—	Column span from the small breakpoint up.
`md`	`1..12 \| 'auto'`	—	Column span from the medium breakpoint up.
`lg`	`1..12 \| 'auto'`	—	Column span from the large breakpoint up.
`xl`	`1..12 \| 'auto'`	—	Column span from the extra-large breakpoint up.
`xsOffset`	`number`	—	Columns to shift the item right at the xs breakpoint (sm/md/lg/xl variants exist too).
`grow`	`number`	—	flex-grow factor for the item.
`order`	`number`	—	Visual order of the item within the container.

Notes

A Grid is both container and item friendly: nest a container Grid inside an item to build complex layouts.
Breakpoint props are min-width based, so xs applies to that size and up unless overridden by a larger breakpoint.

Presets