Auto Grid
The auto-grid is a flexible layout that will create an auto-fill grid with configurable grid item sizes.
.auto-grid is a CSS grid that fills the available space with grid items, provided there is space for the defined --auto-grid-min-size.
Configuration #
| Property | Default value | Description |
|---|---|---|
--gutter | var(--spacing-m) | Sets the horizontal gap between grid cells. It also sets the vertical gap if --gutter-vertical is not defined. The grid gap can be overwritten using the --gutter utility. |
--gutter-vertical | var(--gutter) | Specifically sets the vertical gap between rows of cells. If not set, it falls back to the value of --gutter |
--auto-grid-min-size | 20rem | How large each item should be, as a minimum |
--auto-grid-max-columns | infinity | Sets the maximum number of columns in the grid. |
--grid-placement | auto-fill | Set either auto-fit or auto-fill to change how empty grid tracks are handled |
Exceptions #
| Exception | Description |
|---|---|
.auto-grid[data-auto-grid-fill] | Changes the grid fill mode from `auto-fit` to `auto-fill`. |
.auto-grid[data-auto-grid-max="2"] | Limits the maximum number of items in a column to two. |
.auto-grid[data-auto-grid-max="3"] | Limits the maximum number of items in a column to three. |