Using CSS Grid auto-fill and auto-fit for Responsive Card Layouts

This article demonstrates how two CSS Grid keywords, auto-fill and auto-fit , enable responsive card layouts that automatically adjust to various screen widths without writing media queries.

Fundamental Concepts

Assume you need a row of many cards, each with a minimum width of 200 px, the remaining space evenly distributed, and automatic wrapping on narrow screens.

/* Parent element */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Child element */
.item {
  height: 200px;
  background-color: rgb(141, 141, 255);
  border-radius: 10px;
}

Explanation of the key line:

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

grid-template-columns

Defines how many columns the grid container has and their widths.

repeat(auto-fit, ...)

repeat is a function that repeats the pattern.

auto-fit automatically fits as many columns as the container can hold, applying the following rule to each column.

minmax(200px, 1fr)

minmax sets a minimum of 200 px and a maximum of 1fr (a fraction of the remaining space).

When the screen is narrow, columns stay at least 200 px and then wrap; when the screen widens, columns stretch to fill the row.

Combined Effect

The grid automatically creates as many columns as fit, each at least 200 px and sharing remaining space.

Wider screens show more columns, narrower screens show fewer, with automatic wrapping.

No media queries are needed.

Difference between auto-fill and auto-fit

1. auto-fill

Fills as many column tracks as possible, even if they are empty (placeholder columns).

Creates empty tracks to fill the container.

Suitable for fixed column counts or aligned grids.

2. auto-fit

Collapses empty tracks so existing items stretch to fill the space.

Removes unused tracks, letting content expand.

Ideal for fluid layouts where items should fill the row.

Visual Comparison

If a container can hold ten 200 px cards but only five are placed:

auto-fill keeps ten columns, five with cards and five empty.

auto-fit collapses the empty columns, stretching the five cards to fill the row.

Demo Code

<h2>auto-fill</h2>
<div class="grid-fill">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
    <div>item5</div>
</div>

<h2>auto-fit</h2>
<div class="grid-fit">
    <div>item1</div>
    <div>item2</div>
    <div>item3</div>
    <div>item4</div>
    <div>item5</div>
</div>

.grid-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.grid-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.grid-fill div {
  background: #08f700;
}
.grid-fit div {
  background: #f7b500;
}
.grid-fill div,
.grid-fit div {
  padding: 24px;
  font-size: 18px;
  border-radius: 8px;
  text-align: center;
}

Compatibility

Check browser support on caniuse.com .

When to Use auto-fill vs auto-fit

Use auto-fit when you want each row to expand to the available width based on content (e.g., card layouts, galleries, responsive buttons).

Use auto-fill when you need a fixed number of columns or placeholder tracks (e.g., tables, calendars).

Summary

auto-fill behaves like placeholders; auto-fit behaves like adaptive.

Recommend auto-fit for most responsive card layouts.

Combine with minmax for natural column width adaptation.

With just two lines of CSS, your page can gracefully adapt to any screen size.