How to Set Up a Responsive Grid Layout Without a Framework
If you’ve ever installed Bootstrap or Tailwind just to get a simple 3 column layout, you already know the problem. You end up with a bunch of CSS classes you didn’t write, a bigger stylesheet than you need, and a layout system you don’t fully understand. The good news is that modern CSS can do all of this on its own. No framework, no build step, just plain CSS Grid.
In this post I’ll walk through building a fully responsive grid layout from scratch, the same way I do it for my own projects and client sites. By the end you’ll have a layout that adjusts itself across screen sizes without writing a dozen media queries.
Why skip the framework
Frameworks are useful when you’re working on a big team or need a huge set of pre built components fast. But for most sites, especially blogs, portfolios, and small business sites, they add weight you don’t need. You end up loading an entire grid system’s worth of CSS just to use a handful of its classes. CSS Grid is already built into every modern browser, so there’s nothing to load and nothing to override.
There’s also the control factor. When you write your own grid, you know exactly what every class does. No digging through documentation to figure out why .col-md-6 isn’t behaving the way you expected.
The basic grid setup
Everything starts with a container and the display: grid property.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}This creates 3 equal width columns with a 20px gap between items. The fr unit stands for fraction, so 1fr just means “one equal share of the available space.” If you want 4 equal columns instead of 3, change the repeat count.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>This works fine on a desktop screen. The problem shows up the moment someone opens this on a phone. Three fixed columns squeezed into a 375px screen is unreadable.
Making it actually responsive with auto-fit and minmax
This is the part most tutorials skip over, and it’s the part that matters most. Instead of hardcoding a column count, you let the browser figure out how many columns fit based on a minimum width you set.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}Here’s what’s happening in that one line:
- minmax(250px, 1fr) tells the browser each column should be at least 250px wide, but can grow up to take an equal share of the leftover space
- auto-fit tells the browser to calculate how many of those 250px columns can fit in the current width, and then stretch them to fill any leftover space
- repeat() just saves you from writing that minmax rule out multiple times
The result is a grid that goes from 4 columns on a wide screen, down to 2 on a tablet, down to 1 on a phone, without a single media query. Resize your browser window after adding this and you’ll see it happen live.
If you’d rather not do the math on column counts and gaps yourself, I built a free CSS Grid Calculator that generates this exact CSS for you. You just set your columns, gap, and minimum width, and it spits out ready to paste code.
auto-fit vs auto-fill, and why it matters
These two look almost identical in code but behave differently, and picking the wrong one is a common mistake.
/* auto-fit */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* auto-fill */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));With auto-fit, if you only have 2 items but there’s room for 5 columns, those 2 items will stretch to fill the whole row.
With auto-fill, the browser still reserves space for the columns that would fit, even if there’s no content for them. Your 2 items stay at their minimum width instead of stretching, with empty space left over.
Use auto-fit for things like card layouts or content sections where you want items to expand and fill the row. Use auto-fill for things like a product grid or gallery where you want consistent item sizes no matter how many items you currently have.
Building a real page layout with grid-template-areas
Column grids are great for cards and galleries, but for full page layouts (header, sidebar, main content, footer), grid-template-areas makes things a lot easier to read than juggling row and column numbers.
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 250px 1fr;
gap: 20px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }Now for mobile, you just redefine the areas inside a media query. No need to touch the HTML at all.
@media (max-width: 700px) {
.page {
grid-template-areas:
"header"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}This is a mobile first friendly approach. You write your desktop layout using named areas, then just redraw the map for smaller screens. The actual HTML markup order never has to change.
Common mistakes to avoid
A few things trip people up when they move from frameworks to plain CSS Grid:
Forgetting box-sizing. Without box-sizing: border-box, padding and border get added on top of your width, which throws off your grid math. Add this early in your stylesheet:
* {
box-sizing: border-box;
}Using auto-fill when you meant auto-fit. If your cards look like they’re leaving weird empty gaps on the right side of the row, this is usually why.
Setting a minmax minimum that’s too large for mobile. If your minimum column width is 350px, a 320px wide phone screen still can’t fit even a single column comfortably. Keep minimums realistic, usually under 280px for mobile friendly grids.
Not testing with real content. A grid that looks fine with placeholder boxes can behave differently with actual text, images, and buttons of varying height. Always test with your real content before calling it done.
Wrapping up
CSS Grid genuinely replaces most of what people reach for a framework to do, at least for layout. Once you’re comfortable with auto-fit, minmax(), and grid-template-areas, you can build layouts that are lighter, easier to debug, and don’t depend on someone else’s class naming conventions.
If you want to skip the manual calculation part, the CSS Grid Calculator on this site will generate the grid CSS for you based on the number of columns, gap size, and minimum width you need. It’s free to use and doesn’t require any sign up.
Frequently Asked Questions
Do I need a CSS framework to build a responsive grid?
No. CSS Grid is supported in all modern browsers and can handle responsive layouts on its own using auto-fit or auto-fill combined with minmax(). Frameworks are a convenience, not a requirement.
What's the difference between CSS Grid and Flexbox for responsive layouts?
Grid handles two dimensional layouts, meaning rows and columns at the same time. Flexbox is built for one dimensional layouts, either a row or a column. For a full page layout with a header, sidebar, and content area, Grid is usually the better fit.
Why is my grid not becoming responsive?
The most common reason is using a fixed number of columns like repeat(3, 1fr) instead of repeat(auto-fit, minmax(...)). A fixed column count won't reduce on smaller screens unless you add media queries for it.
Do I still need media queries with CSS Grid?
Not always. Auto-fit and auto-fill can handle a lot of responsiveness on their own. Media queries are still useful for bigger structural changes, like switching a sidebar layout to a stacked layout on mobile.
What's a good minimum column width for mobile friendly grids?
Somewhere between 200px and 280px works well for most content. Anything larger can force a single column layout too early on mid sized tablets, which isn't always what you want.
