repeat() & minmax()

repeat() avoids repetitive track definitions. minmax() creates tracks with a minimum and maximum size — essential for responsive layouts.

repeat()minmax()grid-template-columnsgrid-template-rows

1. repeat() — Avoid Repetition

Instead of writing 1fr 1fr 1fr 1fr, use repeat(4, 1fr). The first argument is the count and the second is the track size (or a pattern of sizes).

Live Demo

CSS

.container {
  display: grid;
  /* 4 equal columns — instead of: 1fr 1fr 1fr 1fr */
  grid-template-columns: repeat(4, 1fr);
}

2. repeat() with a Pattern

You can repeat a multi-track pattern. repeat(2, 1fr 2fr) creates: 1fr 2fr 1fr 2fr — the pattern repeats twice.

Live Demo

1fr

2fr

1fr

2fr

CSS

.container {
  display: grid;
  /* pattern: 1fr 2fr  repeated 2 times */
  /* result:  1fr 2fr 1fr 2fr           */
  grid-template-columns: repeat(2, 1fr 2fr);
}

3. minmax() — Min & Max Track Size

minmax(min, max) creates a track that is at least min wide and at most max wide. This is perfect for tracks that should flex but not shrink below a minimum size.

Live Demo

minmax(100px, 1fr) — flexible but never smaller than 100px

min: 100px

minmax(0, 1fr) — can shrink to 0, great for fr with content

min: 0

CSS

/* never smaller than 100px, can grow to fill space */
.container {
  grid-template-columns: repeat(3, minmax(100px, 1fr));
}

/* can collapse to 0 — useful with fr */
.container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

💡 minmax(0, 1fr) is different from 1fr alone. With just 1fr, the minimum size is auto (content size). With minmax(0, 1fr), the minimum is 0, preventing overflow with long content.

4. minmax() with Fixed Values

Both min and max can be any valid size value: px, em, %, fr, auto, min-content, max-content.

Live Demo

120–200px

1fr

80–150px

CSS

.container {
  grid-template-columns:
    minmax(120px, 200px)  /* sidebar: 120–200px */
    1fr                   /* main: fills rest  */
    minmax(80px, 150px); /* aside: 80–150px   */
}

5. Using min-content & max-content in minmax()

min-content is the smallest size that avoids overflow. max-content is the size needed to fit all content on one line. These are especially useful in minmax() for content-aware sizing.

Live Demo

Short

This is much longer content that would normally overflow

Medium text here

Hi!

CSS

.container {
  grid-template-columns:
    minmax(min-content, 1fr)
    minmax(min-content, 1fr);
  /* each col: at least wide enough for text,
     at most 1fr of remaining space */
}

💡 min-content prevents overflow. max-content prevents unnecessary wrapping. These are powerful keywords for responsive track sizing.

6. Combining repeat() and minmax()

This combination is the foundation of the famous 'RAM' pattern (Repeat, Auto, Minmax). You can create a fixed-column grid where each column flexes but has a minimum size.

Live Demo

CSS

/* 3 equal columns, each can shrink to 0 */
.container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* auto-responsive: as many 200px+ cols as fit */
.container {
  grid-template-columns:
    repeat(auto-fill, minmax(200px, 1fr));
}

💡 repeat(auto-fill, minmax(200px, 1fr)) is the most popular pattern for responsive card grids. See the auto-fill/auto-fit topic for details.