Building Responsive Layouts with CSS Grid
How CSS Grid changed the way I think about layouts
I spent years fighting with floats and flexbox to create layouts. It worked, but it always felt like I was working around the limitations of the tools. Then I started using CSS Grid, and everything changed.
The first time I used grid-template-columns and saw exactly what I wanted happen, I was hooked. No more nested divs. No more complex flexbox calculations. Just define the grid and place items where they should go.
Grid has a lot of properties. grid-template-rows, grid-template-areas, grid-gap, grid-auto-flow. It was overwhelming at first. But I started simple—just a basic two-column layout. Then I added more columns. Then I made it responsive. The fr unit was a game-changer. Instead of calculating percentages or using complex calc() expressions, I could say "this column should take up one fraction, this one should take two." Grid figures out the math.
Complex layouts that would have taken multiple wrapper divs and careful positioning now take a few lines of CSS. Need items to span multiple columns? grid-column: span 2. Need them to start at a specific line? grid-column-start: 2. The grid-template-areas syntax is my favorite feature. I can visually lay out the grid in my CSS, then place items by name. It's self-documenting in a way that other layout methods aren't.
Media queries with Grid are simpler. Instead of changing multiple properties, I can redefine the grid template. Want three columns on desktop, one on mobile? Just change grid-template-columns in a media query. I still use Flexbox for component-level layouts—it's perfect for that. But for page-level structure, Grid is my go-to. They work well together.
Grid isn't perfect for everything. Sometimes Flexbox is still the right choice. Sometimes you need both. But for complex layouts, Grid saves me time and makes my code easier to understand. If you're still using floats for layout, give Grid a try. Start with something simple, then build from there. You might find it changes how you think about CSS layouts too.
Note: This is a mock-up post created as part of the Feather blog template demonstration. The content is provided as an example to showcase the blog's features including markdown rendering, search functionality, tags, and more.
Feather is a blog template built for Next.js. You can use these example posts as a reference when creating your own content.