# Grids That Fill the Space: repeat(), minmax() and auto-fit

One line of CSS, repeat(auto-fit, minmax(14rem, 1fr)), makes a gallery that shows one column on a phone, four on a laptop and more on a wide screen, with no media query at all.

Journeyman · CSS · Updated November 1, 2026

## After this lesson you can

- Build a grid that fits as many columns as there is room for with repeat(auto-fit, minmax())
- Explain how auto-fit differs from auto-fill, and size the rows the browser adds with grid-auto-rows

## Key takeaways

- repeat(4, 1fr) is a short way to write 1fr 1fr 1fr 1fr. The first value is how many times, the second is the track size.
- minmax(14rem, 1fr) means "at least 14rem, at most one share of the space", so a column can stretch but never squash.
- repeat(auto-fit, minmax(14rem, 1fr)) fits as many columns as there is room for, then stretches them to fill the row.
- auto-fill keeps the empty columns it made room for; auto-fit folds them away. They only differ when items run out.
- Rows you never wrote are the implicit grid. grid-auto-rows sets their height.

Trail Photo Club's gallery has three columns, and it looks great on a laptop. Then a member opens it on their phone on the trail, and three columns of photos are squeezed into a screen the width of a hand: each photo the size of a postage stamp. On a wide monitor it's the opposite, three huge photos and a lot of scrolling. You'll hit this on every gallery, product list and card page you build. This lesson's answer is one line of CSS that lets the grid decide how many columns fit, at any width, with no extra rules for phones.

## repeat(): say it once

Writing `1fr 1fr 1fr 1fr 1fr 1fr` is tiring, and one miscount changes the whole grid. `repeat()` (read "repeat") writes a track list for you:

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
```

The first value says how many times, the second what to repeat. `repeat(4, 1fr)` is exactly `1fr 1fr 1fr 1fr`. It can repeat a pattern, too: `repeat(2, 1fr 2fr)` makes `1fr 2fr 1fr 2fr`, and it can sit beside other tracks, as in `200px repeat(3, 1fr)`.

So far the number is fixed. The trick of this lesson is to let the browser pick it.

## minmax(): no smaller than, no bigger than

Think of a bench at a picnic table. Every hiker needs at least an arm's width to eat; if there's extra room, they spread out. Nobody squeezes in below the minimum.

`minmax()` (read "min max") gives a track a minimum and a maximum size:

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(14rem, 1fr));
}
```

`minmax(14rem, 1fr)` means "at least 14rem wide, at most one share of the space". (14rem is 224 pixels at the usual text size.) The columns grow as the gallery grows, and never get narrower than 14rem. But there are still always three of them: on a phone, three 14rem columns are wider than the screen, and the gallery spills off the side. The number of columns still has to adapt.

## auto-fit: as many columns as fit

Put the two together, with `auto-fit` (read "auto fit") in place of the number:

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
```

Read it piece by piece, from the inside out:

1. `minmax(14rem, 1fr)`: each column is at least 14rem, and can stretch to a share of the space.
2. `repeat(auto-fit, ...)`: make as many of those columns as fit in the gallery's width, gaps included.
3. Then stretch them all, with the `1fr`, so together they fill the row exactly.

Here's what one rule does at different widths, with a 1rem (16px) gap:

| Gallery width | Columns | Each column |
|---|---|---|
| 360px (a phone) | 1 | 360px |
| 700px (a small tablet) | 2 | 342px |
| 1000px (a laptop) | 4 | 238px |

No media query (a rule that applies only at some screen widths, which Module 4 teaches), no rule for each screen size: the grid works it out every time the width changes. That's why this one line shows up in so many real stylesheets.

**Try it.** Give a gallery of eight boxes the rule above. Turn on the grid overlay with track sizes, then drag the window from wide to narrow. Count the columns as they drop from four to three, two and one.

![The same trail photo gallery at three widths: one column on a phone, two on a tablet and four on a laptop, from a single CSS rule](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/493f00078d914fffa045ddeda1f0a49e.webp)

## auto-fill and auto-fit: when the items run out

There's a second keyword, `auto-fill` (read "auto fill"), and the two look the same in a full gallery. The difference shows when there are fewer items than columns would fit:

```css
.few-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}
```

Picture a gallery 1000 pixels wide with only two photos in it. Four columns fit either way:

- **`auto-fill`** keeps all four columns, the two empty ones too, so each photo is 238px wide and the right half of the row is empty space.
- **`auto-fit`** makes the four columns, then folds the empty ones down to nothing, so the two photos stretch to 492px each and fill the row.

Choose `auto-fit` when the items should always fill the row, like a gallery. Choose `auto-fill` when every item should keep the same size however many there are, like a shop's product grid where a category with two products shouldn't get giant cards.

## The implicit grid: rows you never wrote

The gallery above never says how many rows it has. The columns you write are the **explicit grid**; every row the browser adds to hold the rest of the items is the **implicit grid**. Implicit rows are `auto` height: as tall as their content. To give every added row the same height, use `grid-auto-rows`:

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  grid-auto-rows: 12rem;
  gap: 1rem;
}
```

Now every row is 12rem tall, so a featured photo with `grid-row: span 2` is exactly two rows tall, and the gallery stays a neat pattern. `grid-auto-rows: minmax(12rem, auto)` keeps rows at least 12rem tall but lets one grow when its content needs more room.

The implicit grid grows sideways, too, if an item is placed past the last column line: `grid-column: 5` in a three-column grid makes the browser add columns to reach it. That's usually a mistake, and the grid overlay in the developer tools shows the extra tracks.

One more thing to know: a single column can't be narrower than its `14rem` minimum, so on a screen narrower than 14rem the photo spills over the edge. The lesson *calc(), min() and max(): Math in CSS* in Module 4 shows the fix, `minmax(min(14rem, 100%), 1fr)`.

## Try it in Grid Town

[Grid Town, puzzles 19 to 22](https://www.ask-codey.com/games/grid-town/19): played right on the lesson page.

The town keeps growing. These puzzles are checked at a narrow town and a wide one, so a fixed number of columns won't do: `repeat()` with `auto-fill` or `auto-fit`, `minmax()` and `grid-auto-rows` make lots that fit any width. Switch between the two widths above the town to see both.

## Check yourself

2 questions to try on the lesson page.

## So what

`repeat(auto-fit, minmax(14rem, 1fr))` is one of the most useful lines in CSS: a layout that adapts to every screen without a single media query. Learn to read it piece by piece, and you'll recognize it in the stylesheets of half the sites you visit.

## Key terms

- [repeat()](https://www.ask-codey.com/glossary/repeat)
- [minmax()](https://www.ask-codey.com/glossary/minmax)
- [Auto-fit](https://www.ask-codey.com/glossary/auto-fit)
- [Auto-fill](https://www.ask-codey.com/glossary/auto-fill)
- [Implicit grid](https://www.ask-codey.com/glossary/implicit-grid)

## Cheat sheets

- [Grids That Fill the Space: repeat(), minmax() and auto-fit](https://www.ask-codey.com/cheat-sheets/css-grid-auto-fit-minmax-cheat-sheet)

## Related

- [CSS Grid: Rows and Columns](https://www.ask-codey.com/lessons/css-grid-basics)
- [Placing Items: Lines, Spans and Named Areas](https://www.ask-codey.com/lessons/css-grid-placement-and-areas)
- [Subgrid: Lining Up Cards](https://www.ask-codey.com/lessons/css-subgrid)

Source: https://www.ask-codey.com/lessons/css-grid-auto-fit-minmax