Track Functions

Remove repetition and put useful limits around flexible tracks.

repeat() writes a pattern

1

2

3

4

repeat(4, 1fr) is the same track list as 1fr 1fr 1fr 1fr.

minmax() sets a range

At least 8rem

At least 12rem, then 2fr

minmax(8rem, 1fr) keeps the first track from becoming narrower than 8rem while allowing it to share extra room.

Important HTML

Track demos use a grid stage of cells.

<div class="grid-stage">…</div>

Important CSS

repeat and minmax write track patterns.

.demo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.minmax-demo {
  grid-template-columns: minmax(8rem, 1fr) minmax(12rem, 2fr);
}