CSS repeat() and minmax()

repeat(): stop typing the same thing

These two lines are the same:

1
2

grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

repeat(count, size) repeats a size a number of times. You can repeat a pattern too: repeat(2, 100px 1fr) makes 100px, 1fr, 100px, 1fr.

minmax(): a size with limits

minmax(min, max) gives a track a minimum and a maximum size. The track is never smaller than the min or larger than the max.

1
2
3
4
5

<style>
  .grid > div { background: #d0e8f2; border: 1px solid #1a5276; padding: 10px; }
  .grid { display: grid; grid-template-columns: minmax(80px, 150px) minmax(100px, 1fr) 1fr; gap: 8px; }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

The first column grows from 80px up to 150px. After that the remaining space goes elsewhere.

The robust 1fr

As noted in the fr unit, 1fr has a hidden minimum equal to its content. When a long word or wide image blows the grid out, use:

1

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax(0, 1fr) lets the column shrink to nothing, so the columns stay equal regardless of the content.

Preparing for the next lesson

repeat() and minmax() are the building blocks of a grid that adapts without a single media query: auto-fit and auto-fill.

1

.layout { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 20px; }