CSS Academy · Lesson

Auto-fit and Auto-fill with minmax

Create responsive column counts automatically using auto-fit and auto-fill with minmax().

Auto-fit and Auto-fill with minmax is a free CSS Academy lesson on CoddyKit — lesson 2 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.

The Auto-Responsive Grid

The most powerful CSS Grid pattern: a fully responsive grid that adjusts column count automatically without any media queries, using auto-fit or auto-fill combined with minmax().

auto-fill

auto-fill fills the row with as many columns as it can fit at the given minimum size. Empty columns are preserved as empty tracks at the end.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 16px;
}

auto-fit

auto-fit works like auto-fill but collapses empty tracks to zero width. Existing items stretch to fill the remaining space.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 16px;
}

auto-fill vs auto-fit Difference

The difference only matters when there are fewer items than can fill the row:

auto-fill: empty column tracks remain, items do not stretch to fill
auto-fit: empty tracks collapse, items expand to fill all available width

auto-fit with minmax()

The famous responsive grid pattern — items are at least 250px wide, grow to fill space, and wrap to new rows automatically:

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

minmax() Explained

minmax(min, max) defines a track size range. The track will not be smaller than min or larger than max. Combined with fr, it creates flexible tracks bounded by a minimum.

/* minmax(250px, 1fr):
   never smaller than 250px,
   grows to 1fr of available space */

auto-fill with minmax for Fixed Items

When you want items at a fixed size and allow empty space at the end:

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 80px));
  gap: 8px;
  /* Items always 80px, gaps at end */
}

Responsive Without Media Queries

This is the main benefit: repeat(auto-fit, minmax(280px, 1fr)) automatically adapts from 1 column on mobile to as many columns as fit on larger screens:

@media — none needed!

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

min() for Safer minmax

Avoid layout issues in tiny containers by using min(100%, 280px) as the minimum instead of a raw pixel value:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

auto-fill for Masonry-Like Alignment

With auto-fill, empty tracks at the end maintain alignment when items count is not a multiple of columns — useful for consistent grids.

Grid Intrinsic Sizing vs Flexbox

Flexbox flex-wrap + flex: 1 1 250px is similar but does not guarantee equal column widths — items may stretch unevenly. Grid with minmax ensures perfectly uniform tracks.

Quick Check

Which grid value creates responsive columns without media queries by collapsing empty tracks so items fill available space?

Recap

repeat(auto-fit, minmax(250px, 1fr)) is the single most powerful responsive grid pattern — zero media queries needed. auto-fit collapses empty tracks so items fill the row. auto-fill preserves empty tracks for consistent alignment. Always pair with gap for gutters.

Frequently asked questions

Is the “Auto-fit and Auto-fill with minmax” lesson free?

Yes — the full text of “Auto-fit and Auto-fill with minmax” 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 “Auto-fit and Auto-fill with minmax”?

Create responsive column counts automatically using auto-fit and auto-fill with 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 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Auto-fit and Auto-fill with minmax” 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

← Back to CSS Academy