1. The auto-fit responsive grid

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

minmax(200px, 1fr) says each column is at least 200px and at most an equal share of the space. auto-fit fits as many of those columns as will comfortably fit, then wraps the rest.

2. A fixed number of columns

When you do want an exact count, list the tracks directly.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

3. Change the layout at a breakpoint

For full control, switch the columns inside a media query.

.grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

This stacks everything into one column on phones and splits into two on tablets and up.

Common mistakes

  • Forgetting display: grid. The grid properties do nothing without it.
  • Using fixed pixel column widths. They will not adapt — use fr units or minmax.
  • Adding margins for spacing. Use gap instead; it spaces items without edge gaps.

Frequently asked questions

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

auto-fit stretches the visible columns to fill the row, while auto-fill keeps empty placeholder tracks. For most responsive layouts, auto-fit is what you want.

Do I still need media queries with Grid?

Often not. The auto-fit plus minmax pattern adapts on its own. Reach for media queries only when you need a deliberately different layout at a size.

Want to understand the layout properties behind this? Work through our free HTML & CSS course.