0Pricing
CSS Academy · Lesson

repeat() and minmax() in Grid

Generate multiple grid tracks and define flexible size ranges using repeat() and minmax().

repeat() and minmax() in Grid is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

repeat() in Grid Context

repeat(count, track-size) is a CSS Grid function that generates multiple track definitions without repetition. It works inside grid-template-columns and grid-template-rows.

repeat() with Fixed Count

Create 4 equal columns:

.grid {
  grid-template-columns: repeat(4, 1fr);
  /* equivalent to: 1fr 1fr 1fr 1fr */
}

repeat() with Pattern

Repeat a pattern of tracks:

.striped-grid {
  grid-template-columns: repeat(3, 100px 1fr);
  /* 100px 1fr 100px 1fr 100px 1fr */
}

minmax() Inside Tracks

minmax(min, max) defines a track size range:

.grid {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  /* 3 columns, each between 200px and 1fr */
}

auto-fit with minmax()

The responsive grid recipe:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

minmax(min-content, max-content)

Track sizes can use intrinsic sizing keywords:

.labels {
  grid-template-columns: minmax(min-content, 200px) 1fr;
  /* left column: as narrow as content needs, up to 200px */
}

minmax() in Rows

Use minmax() for rows to allow content-driven height with a minimum:

.gallery {
  grid-auto-rows: minmax(150px, auto);
  /* rows: at least 150px, grow if content is taller */
}

fit-content() for Columns

fit-content(max) makes a track as wide as its content up to a specified maximum — like max-content but capped:

.layout {
  grid-template-columns: fit-content(200px) 1fr;
  /* sidebar: fits content up to 200px, main: fills rest */
}

Combining repeat() and Named Lines

Repeat named lines to address individual columns by name:

.grid {
  grid-template-columns: repeat(4, [col] 1fr);
}
/* .item { grid-column: col 2 / col 3; } */

auto-fill with minmax for Fixed Items

When items should not stretch beyond their natural size:

.gallery {
  grid-template-columns: repeat(auto-fill, minmax(150px, 150px));
  /* fixed 150px tiles; empty space at end of last row */
}

fr vs Percentages in Grid

Unlike percentages, fr units automatically account for gap space. repeat(3, 1fr) with gap: 24px gives 3 truly equal columns. Percentages would need calc() to subtract gap.

Quick Check

What does repeat(3, minmax(100px, 1fr)) define?

Recap

repeat(count, track) generates multiple tracks without repetition. minmax(min, max) defines flexible track size ranges. The repeat(auto-fit, minmax(280px, 1fr)) pattern is the most powerful responsive grid — zero media queries, automatically responsive columns. Use fit-content(max) for content-aware sidebar columns.

Frequently asked questions

Is the “repeat() and minmax() in Grid” lesson free?

Yes — the full text of “repeat() and minmax() in Grid” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “repeat() and minmax() in Grid”?

Generate multiple grid tracks and define flexible size ranges using repeat() and minmax(). You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “repeat() and minmax() in Grid” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. calc() for Dynamic Calculations
  2. min() max() and clamp() for Fluid Values
  3. repeat() and minmax() in Grid
  4. color-mix() and relative color syntax
← Back to CSS Academy