Responsive Grid with auto-fit and minmax()

With repeat(auto-fit, minmax(250px, 1fr)) CSS Grid creates a responsive layout that adds or removes columns by itself. Learn auto-fit vs auto-fill and build an image gallery with no media queries.

The one-line responsive grid

What if your grid could decide by itself how many columns fit? On a phone it shows one column, on a tablet two, and on a big screen four, without any media queries. That is exactly what this line does:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

It looks scary at first, so let's take it apart piece by piece.

What does minmax() do?

minmax(min, max) sets a size range for a track. The column is never smaller than the minimum and never bigger than the maximum.

• minmax(250px, 1fr) – at least 250 pixels wide, but grow to share the free space if there is room.
• minmax(100px, 300px) – between 100 and 300 pixels.
• minmax(150px, auto) – at least 150 pixels, and as big as the content needs.

Think of a stretchy belt with a minimum and maximum size. It adjusts to fit, but only within its range.

How does repeat(auto-fit, ...) work?

In the last lessons, you wrote a number in repeat(), like repeat(3, 1fr). Instead of a number, you can write auto-fit or auto-fill. Then the browser counts how many columns can fit in the container, given the minimum size.

Put it together and the browser thinks like this: "My container is 900 pixels wide. Each column needs at least 250 pixels. Three columns fit (750 pixels plus gaps), four do not. So I make three columns, and I stretch them with 1fr to fill the whole width." When the screen gets smaller, it recalculates and uses fewer columns.

Here is a list of course cards that behaves like that:

<section class="card-grid">
  <article class="card"><h3>HTML</h3><p>Structure your pages.</p></article>
  <article class="card"><h3>CSS</h3><p>Style everything.</p></article>
  <article class="card"><h3>JavaScript</h3><p>Add interaction.</p></article>
  <article class="card"><h3>Git</h3><p>Save your progress.</p></article>
  <article class="card"><h3>Accessibility</h3><p>Build for everyone.</p></article>
</section>

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

.card {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: system-ui, sans-serif;
}

Resize your browser window slowly. The cards jump from four columns, to three, to two, to one, and they always fill the full width. Unlike Flexbox with wrap, every card in every row has exactly the same width, even on the last row.

Common mistake: On very small phones (narrower than 250px plus padding), the minimum is too big and the grid overflows sideways. Use minmax(min(250px, 100%), 1fr) instead. The min() function picks the smaller value, so a column is never wider than the container.

What is the difference between auto-fill and auto-fit?

They only behave differently when there are fewer items than columns that could fit, for example two cards on a very wide screen.

Keyword	What happens with extra space
auto-fill	Keeps empty "ghost" columns, so the items stay at their minimum-ish size.
auto-fit	Collapses the empty columns, so the items stretch to fill the whole row.

Imagine a row that has room for five columns but only two items. With auto-fill, you get two cards and three invisible empty columns, so the cards stay narrow on the left. With auto-fit, the empty columns collapse to zero and the two cards stretch across the full width.

Tip: Use auto-fit when you want items to always fill the row (like cards in a section). Use auto-fill when you want items to keep a consistent size even if there are only a few (like products in a shop grid or a gallery that will fill up later).

Build a responsive image gallery with no media queries

Let's put this into a real photo gallery. The images all have the same height and are cropped neatly, and the number of columns changes with the screen size.

<section class="gallery">
  <img src="https://picsum.photos/id/10/600/400" alt="Forest path in the morning">
  <img src="https://picsum.photos/id/11/600/400" alt="Mountain lake">
  <img src="https://picsum.photos/id/12/600/400" alt="Rocky beach at sunset">
  <img src="https://picsum.photos/id/13/600/400" alt="Sand dunes">
  <img src="https://picsum.photos/id/14/600/400" alt="Calm sea">
  <img src="https://picsum.photos/id/15/600/400" alt="Waterfall in the hills">
  <img src="https://picsum.photos/id/16/600/400" alt="Green valley">
  <img src="https://picsum.photos/id/17/600/400" alt="Country road">
</section>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 12px;
  padding: 12px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.2s;
}

.gallery img:hover {
  transform: scale(1.03);
}

You get a tidy gallery of photos with rounded corners. On a big monitor you see five or six per row, on a laptop four, on a tablet two or three, and on a phone one. aspect-ratio: 4 / 3 gives every image the same shape, and object-fit: cover crops the photo to fill that shape without stretching it. On hover, a photo grows slightly.

Note: This "intrinsic" layout is one of the most useful patterns in modern CSS. You still need media queries for big changes, like moving a sidebar, but for repeating items like cards and photos, auto-fit and minmax() often do the whole job.

Practice exercise

Build a "team members" section with eight people. Each card has a round photo, a name and a job title. Make the grid show as many columns as fit, with each card at least 180px wide. Then change auto-fit to auto-fill, delete six cards, and compare what happens on a wide screen.

Hint: start with repeat(auto-fit, minmax(min(180px, 100%), 1fr)). With only two cards left, auto-fit will stretch them and auto-fill will keep them narrow.

Key takeaways

• repeat(auto-fit, minmax(250px, 1fr)) makes a grid that picks its own number of columns.
• minmax(min, max) keeps a track between a minimum and a maximum size.
• auto-fit collapses empty columns so items stretch; auto-fill keeps empty columns.
• Use min(250px, 100%) inside minmax() to avoid overflow on very small screens.
• aspect-ratio and object-fit: cover keep gallery images neat and equal in shape.