← Code Examples

CSS & Layout

Responsive Grid Without Media Queries

A grid that goes from one column to many as space allows — driven by one line of CSS, with no breakpoints to write or maintain.

Live Result

Drag your browser window narrower and wider — the cards reflow on their own.

index.html
<div class="grid">
  <article class="card">Strategy</article>
  <article class="card">Design</article>
  <article class="card">Development</article>
  <article class="card">SEO</article>
  <article class="card">Hosting</article>
  <article class="card">Support</article>
</div>
style.css
.grid {
  display: grid;
  /* The whole trick is this one line: */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

Why this works

Three pieces do all the work. repeat(auto-fit, …) tells the grid to create as many columns as will fit on the current row instead of a fixed number. minmax(160px, 1fr) says each column is at least 160px wide, but may grow to share leftover space equally. gap handles the spacing without margins.

So when the container is wide, the browser packs in several 1fr columns; as it narrows, columns drop away one at a time until you're down to a single full-width card. You never name a breakpoint — the layout responds to the space it's actually given.

Reach for auto-fill instead of auto-fit when you want empty column tracks to be preserved (useful if items should keep their max width rather than stretching to fill a sparse row).