layouts

Grid

Composable CSS grid with columns, rows, template areas and repeat auto-fill/auto-fit intrinsics.

Show code

API Reference

Extends native HTML attributes inferred from the rendered element `as`.

Property	Type	Default	Description
`as`	`ElementTag`	"div"	HTML element to render as.
`ref` $bindable	`HTMLElement`		Reference to the rendered DOM element.
`display`	`union`	"grid"	CSS `display` value.
`cols`	`string`		Number of columns as an integer shorthand (`"3"` → `repeat(3, 1fr)`) or a full `grid-template-columns` string.
`rows`	`string`		Number of rows as an integer shorthand (`"2"` → `repeat(2, 1fr)`) or a full `grid-template-rows` string.
`areas`	`string`		CSS `grid-template-areas` string.
`gap`	`union`		Gap between items on both axes.
`rowGap`	`union`		Gap between rows.
`colGap`	`union`		Gap between columns.
`autoFill`	`string`		Generates `repeat(auto-fill, minmax(value, 1fr))`. Takes precedence over `cols`.
`autoFit`	`string`		Generates `repeat(auto-fit, minmax(value, 1fr))`. Empty tracks collapse to zero. Takes precedence over `cols`.
`autoRows`	`string`		CSS `grid-auto-rows` value.
`flow`	`union`		CSS `grid-auto-flow` value.
`align`	`union`		CSS `align-items` value.
`children`	`Snippet`		Content to render inside the grid container.

autoFill creates as many columns as possible without any media query.

Show code

Design 12

Development 8

Marketing 5

Research 3

QA 7

DevOps 4

Name zones with areas to compose a layout (header, sidebar, main, footer).

Show code

header

sidebar

main

footer

Pass a custom CSS template to cols for columns of different widths.

Show code

1fr

2fr

1fr

2fr

flow="row-dense" fills gaps left by items spanning multiple columns.

Show code