You can build a responsive CSS Grid without media queries with one line: repeat(auto-fit, minmax(...)).

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

The browser creates as many columns as can fit based on the minimum track size and the container’s available width. When another column no longer fits, the items wrap onto the next row.

Adjust 100px based on what works for your component.

What each part does

Read the declaration from the inside out:

• minmax(100px, 1fr) sets a minimum track size of 100px and lets the track grow to an equal fraction of the available space.
• auto-fit asks the browser to fit as many of those columns as it can and collapse empty tracks.
• repeat() creates the required number of columns, saving you from writing a fixed count such as repeat(4, 1fr).

The gap counts toward the available width too. Two 100px columns with a 1rem gap need 216px when the root font size is 16px. The browser only creates the second track when both tracks and the gap fit.

This behavior depends on the grid container’s width, not the viewport width. Put the same component in a narrow sidebar and a wide main column, and each copy chooses its own column count. A viewport media query responds to the viewport instead. Container queries are another option when more than the column count should change based on the component’s available width.

auto-fit versus auto-fill

auto-fit and auto-fill often look identical when enough items fill the row. To decide how many repeated tracks fit, auto-fit first acts like auto-fill. After the browser places the items, auto-fit collapses the empty tracks.

With auto-fill, the browser keeps the empty tracks. The existing items stay at the width they would have had if those tracks contained something:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

With auto-fit, empty tracks collapse and the occupied tracks expand into the freed space. For a card list where the last few cards should stretch across the row, auto-fit is usually the right choice. Use auto-fill when preserving the implied column slots matters more than stretching the items.

Handle grid and content overflow

If the grid container becomes narrower than 100px, the track can overflow. Keeping the basic pattern is often the clearest option.

For a grid that must fit inside a container narrower than its normal minimum, you can make the track floor shrink:

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

This is an optional fallback, not a universal overflow fix. min(100%, 100px) uses 100px when it fits and 100% when the container is narrower. The auto-repeat calculation still counts the 1rem gap when it checks whether another track fits.

Grid items can also have an automatic minimum size that stops them from shrinking with their track. Reset that minimum on each direct child:

.grid-container > * {
  min-width: 0;
}

Long URLs and other unbroken text are a different problem. Allow that content to wrap inside the card:

.card {
  overflow-wrap: anywhere;
}

min-width: 0 helps the grid item shrink. overflow-wrap: anywhere controls how long content wraps. Neither rule replaces the other.

When a media query still makes sense

This pattern handles the number and width of columns. It doesn’t replace media queries when the whole page needs a different layout, such as moving filters into a drawer.

Use the grid line when the question is “how many cards fit?” Use a container query when a component needs other changes based on its own width. Use a media query for viewport-level changes.

For text and spacing that should resize smoothly, use clamp() to create fluid CSS values.

If cards should flow as rows instead of staying on grid tracks, use flex-grow and flex-basis to build responsive Flexbox cards.

If each card also needs a fixed media box, aspect-ratio keeps images and videos in proportion.

For a single element that needs a responsive width cap, use width with max-width.

You can also read the full guide to responsive CSS without media queries.

You can browse more responsive CSS examples and frontend visuals.

Wrap-up

repeat(auto-fit, minmax(100px, 1fr)) creates as many useful columns as the container can fit, then shares the extra space between them. Adjust the minimum based on the result you want.

For more short, visual frontend lessons, visit WebDevVisuals.