Grid
Grids layout your content into columns AND rows. They can be named, auto-generated to available space, and much more. The Parent container controls the size of its child cells.
Last updated
Grids layout your content into columns AND rows. They can be named, auto-generated to available space, and much more. The Parent container controls the size of its child cells.
Last updated
: A straightforward guide.
: Left column explains grid parent container properties. The right column explains child container properties.
For responsive grids to neatly dump items.
auto-fit creates as many columns as can fit given the sizing definition which follows.
minmax() takes the minimum and maximum allowed column size.
Using Stephanie Eckles' explanation (ref at page bottom):
We'll calculate it using the math function min(). It returns the smaller computed size between the options.
The reason is that there is potential for overflow once the available space is more narrow than 30ch. By listing 100% as an alternate option, the column can fill whatever space is available below that minimum.
The behavior with this minimum in place means that once the available space becomes less than the amount required for multiple elements to fit in the row, the elements will drop to create new rows. So with a minimum of 30ch, we can fit at least three elements in a 100ch space. However, if that space reduces to 70ch, then only two would fit in one row, and one would drop to a new row.
For the maximum, we've used 1fr, which allows the columns to stretch out and share the space equitably when more than the minimum is available.
Define grid gap sizes and minimum column sizes as variables, either locally (as shown) or in global styles. The minimum column size variables will function as a "breakpoint" before causing the overflow to become new rows.