Grid · envUI

Show code

Variants

As many as fit: Items of one kind, each at least a minimum width; one column when narrow.
A set number: Content in a set number of equal columns at every width.
A template: Columns of different widths, such as a main column and its details.

A template: the main column twice as wide as its details.

Show code

Behaviour

Adapting to width

Given a minimum width, a grid fits as many columns as it can, with no breakpoints of its own.

The rest of a row stays empty, so every item keeps one width.

Show code

Rules

A grid of items fits its columns to the room it has, rather than keeping a set number.

Use it when

Items of one kind in as many columns as fit, such as cards or stats
A main column beside a narrower one, such as a summary and its details
Content lined up in a set number of equal columns

DoA minimum width, so the grid fits the columns to its own width.

Show code

Don’tThree columns in a narrow pane: each card is squeezed.

Show code