Responsive CSS Grid 4-Column Layout

Honestly, hardcoding a 12-column grid and cluttering your stylesheets with media queries just to stack a few cards on a phone feels like a massive waste of time. CSS Grid can do the heavy lifting right out of the box, letting you swap out a fragile stack of breakpoints for a single, tidy line of code.

• The Go-To Snippet: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
• Breakpoints Required: Zero (the columns collapse and wrap naturally)
• Support: 97%+ across every modern browser you actually care about
• Where It Really Shines: E-commerce product cards, image galleries, and blog feed feeds

The Modern Approach: Leaning on auto-fit and minmax()

Old-school frameworks forced us into mental gymnastics, calculating fractional offsets like span 3 just to claim a quarter of a 12-column setup. The moment the viewport shrinks, you're stuck patching things up with more media queries to keep layouts from falling apart. Sure, writing grid-template-columns: repeat(4, 1fr) looks great on an ultrawide desktop, but open that same page on an iPhone and you'll either crush the content or trigger an ugly horizontal scrollbar.

CSS Grid flips that logic on its head. Instead of worrying about screen widths, you just tell the browser the absolute narrowest your cards are allowed to get. From there, the engine calculates the math and figures out how many can fit on the screen at any given moment.

Step-by-Step: Putting Together the 4-Column Grid

The beauty of a fluid grid is how little markup you actually need to write: just a wrapper container and whatever cards or blocks you want to arrange inside it.

1. Setting Up the HTML

Keep your markup lean. Drop your cards directly into a straightforward wrapper div:

HTML

<div class="grid-container">
  <div class="grid-item">Card 1</div>
  <div class="grid-item">Card 2</div>
  <div class="grid-item">Card 3</div>
  <div class="grid-item">Card 4</div>
</div>

2. Applying the Base Grid Styles

First, turn the parent element into a grid. Throwing a gap on the container takes care of gutters in one shot, saving you from those annoying negative margin hacks we used to wrestle with in Flexbox or old float layouts.

CSS

.grid-container {
  display: grid;
  gap: 20px; /* Even spacing between rows and columns without margin headaches */
}

.grid-item {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 8px;
}

3. Making It Fluid (No Media Queries Required)

Now for the fun part where CSS Grid handles responsiveness on its own. By combining repeat(), auto-fit, and minmax(), you hand over all the tedious resizing and wrapping chores directly to the browser.

CSS

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

Here is what is actually happening under the hood:

• minmax(250px, 1fr): This sets a hard floor. Your columns won't ever pinch narrower than 250px. But whenever there's leftover breathing room on the row, that 1fr lets them stretch out equally to soak up the extra pixels.
• auto-fit: This tells the browser to cram in as many 250px columns as physically possible across the container width. On an 1100px screen, you get a clean 4-column layout. When the screen drops down around 700px, 4 items won't fit without violating the minimum, so it neatly drops down to 2 columns and stretches them to fill the gap.

auto-fit vs. auto-fill: Which One Do You Actually Want?

People mix these two keywords up all the time, but the difference really smacks you in the face when you only have a couple of items on the page. Check out this detailed guide on auto-fit vs. auto-fill if you're curious about complex edge cases.

Reach for auto-fit whenever you want your items to stretch out and own the entire row. If your four-column layout only has two cards loaded up, auto-fit will simply expand both of them so each takes up half the container width.

Choose auto-fill if you want the items to lock into their standard dimensions regardless of how many exist. If you only render two cards, auto-fill keeps them sized at their base width and preserves empty space on the right where columns three and four would normally sit.

For standard layouts like article listings, portfolio tiles, or product catalogs, auto-fit is almost always what you're looking for.

The Fallback: When You Have to Respect Strict Breakpoints

Sometimes your designer will hand you a spec that demands exactly 4 columns on desktop, 2 on tablet, and 1 on mobile - no weird intermediate steps allowed. If you're building structured page regions, grid-template-areas is usually great for that. But because minmax() responds strictly to container space, it might naturally settle into a 3-column state at certain mid-range widths, which can clash with a strict 4-to-2-to-1 design spec.

When you're bound by strict rules like that, ditch auto-fit and fall back to classic mobile-first media queries:

CSS

.grid-container {
  display: grid;
  gap: 20px;
  /* Start mobile-first with a single stacked column */
  grid-template-columns: 1fr;
}

/* Tablet: Lock it to exactly 2 columns */
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: Lock it to exactly 4 columns */
@media (min-width: 1024px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

Common CSS Grid Traps to Dodge

Even simple grid setups can trip you up if you aren't careful. Getting these fundamentals straight will also save your sanity when diving into trickier layouts like CSS Grid masonry or playing with subgrid.

• Hardcoding widths on children: Resist the muscle memory of tossing width: 100% or width: 250px onto your .grid-item styles. Let the parent grid handle the sizing math. Explicit child widths only introduce weird overflow bugs and fight against the minmax() logic.
• Skipping box-sizing: Generous card padding and thick borders can quickly blow past your intended column bounds. Make sure box-sizing: border-box is active across the board in your base reset.
• Reaching for margins to space items: Don't bother juggling margin-right or margin-bottom across child cards. Sticking to gap on the grid parent keeps your gutters rock solid without weird edge-case spacing issues.