Grid | Brio

The grid is a quick way to use the CSS grid system for auto-fill responsive grids. It's not meant for precise control of column widths, but rather for creating a quick, flexible, responsive grid without a lot of work. If you need more, just use CSS grid directly.

Examples

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

<div class="grid" style="--grid-min: 12rem">
        <div class="docs-box">Cell 1</div>
        <div class="docs-box">Cell 2</div>
        <div class="docs-box">Cell 3</div>
        <div class="docs-box">Cell 4</div>
        <div class="docs-box">Cell 5</div>
        <div class="docs-box">Cell 6</div>
    </div>

Quirk worth knowing: when the container is narrower than --grid-min, you get a single full-width column, but it doesn't overflow horizontally, nor do items overflow. The minmax(--grid-min, 1fr) formula means "at least this wide, but grow to fill." So, with widths that can't fit even one column at --grid-min, the 1fr side takes over and items fill the row individually. This is usually what you want. I mention it because "my grid isn't showing multiple columns" often comes down to a narrow container.

Brio's grid uses auto-fill, which leaves empty column tracks when you have fewer items than columns. You ca use the .is-autofit variant to space items evenly, but never wrap to a single column. If you want something different, write a project-specific grid instead.

Reference

Source: src/css/composition.css

Applies to

.grid

Classes

Class	Kind	Description
`.is-autofit`	variant	Minimum column width for auto-fit columns. What's the difference? Auto-fill columns are spaced evenly, but may wrap to a single column. Auto-fit columns are spaced evenly, but never wrap to a single column.

Tokens

Token	Default	Description
`--grid-min`	`16rem`	Minimum column width for auto-fill columns
`--grid-gap`	`var(--gutter-spacious)`	Gap between grid cells