Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Multiple tracks in a track-list with auto-fill and minmax()

The repeat syntax can take a track-list rather than a single value, this means you can repeat a more complex track-list. You can use minmax() in this track list, here I am making the max of my larger tracks 2fr, and the smaller ones 1fr. This means that the larger tracks will have more of any leftover space assigned.

Currently requires Chrome Canary

Read the specification | View example as full page

See the Pen Grid by Example 35: Repeating multiple track lists with minmax() by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples