repeat() & minmax()
repeat() avoids repetitive track definitions. minmax() creates tracks with a minimum and maximum size — essential for responsive layouts. sdfsdfs
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).
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.
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.
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));
}4. minmax() with Fixed Values
Both min and max can be any valid size value: px, em, %, fr, auto, min-content, max-content.
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.
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 */
}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.
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));
}