The CSS Grid Technique That Will Make You Stop Using Flexbox

Let's be honest – we developers are creatures of habit. When you've got a tool that works, you stick with it. I can't count how many times I've written something like this:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* ...and probably five other flex properties */
}

"Need to center something? Flex it. Sidebar layout? Flex it. Complex dashboard? Just nest those flex containers!"

And it works! Well, most of the time. But then come those layouts that make you question your life choices. You know the ones I'm talking about:

• That three-column layout that needs to stack differently on mobile
• The sidebar that keeps misbehaving when you add more content
• The dreaded "equal-height cards" that somehow always end up... not so equal
• The "simple" dashboard that turned into flex-inception with five levels of nesting

We've all been there, writing CSS that looks something like this:

.dashboard {
  display: flex;
  flex-direction: column;
}

.dashboard-row {
  display: flex;
  gap: 20px;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-content {
  display: flex;
  align-items: center;
  /* The flex nesting continues... */
}

Sure, you could argue that this works. But deep down, you know there's that nagging feeling every time you add another display: flex to fix a layout issue. Though it holds things together, but you know there's probably a better way.

And let's talk about responsiveness. Have you ever tried to completely reorder flex items across breakpoints? It's possible, but it often feels difficult sometimes. You could end up with a stack of media queries that would make any code reviewer cry.

The funny thing is, we stick with Flexbox because it's familiar. We know its quirks, we've memorized the properties, and we've got bookmarks for when things go wrong.

But what if I told you there's a way to handle all these layouts with cleaner, more intuitive code? A way that actually makes more sense when you look at it six months later?

Here's the thing – I'm not here to bash Flexbox. It's still great at what it does. But after you see this approach to Grid (specifically using Grid template areas), you'll probably find yourself reaching for Flexbox a lot less often. Trust me, your future self will thank you when you're maintaining that code six months down the line.

In this post, I'll show you exactly why I switched and why you should too!

The Grid Technique: Grid Template Areas

Here's the technique that made me drop my Flexbox addiction: Grid Template Areas. I know what you're thinking – "Oh great, another Grid tutorial." But stick with me here, because this is probably not the Grid you're thinking of.

Instead of wrestling with line numbers and spans, Grid Template Areas lets you literally draw your layout. Yes, you read that right. It's like ASCII art meets CSS, and it's ridiculously intuitive.

Here's what I mean:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  gap: 1rem;
}

Look at that. You can actually see the layout even without "seeing the layout". Each quoted line represents a row, and each word represents a component's position.

If you want to place your components? It's as simple as this:

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

Here's the layout:

That's it. Seriously. No justify-content, no align-items, no flex-grow calculations, no nested containers. Just name your areas and place your components.

"But wait," you might say, "what about responsive design?" This is where it gets even better. To completely reorganize your layout for mobile, just redraw it:

@media (max-width: 768px) {
  container {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
  gap: 1rem;
}
}

Everything reflows exactly how you want it. No messing with order properties, no complex flex direction changes, no pulling your hair out over nested flex container behavior.

And here's a good trick – if you need a gap in your layout? Just use a dot:

.container {
  grid-template-areas:
    "header header header"
    "sidebar . content"
    "footer footer footer";
}

Here's the layout:

That little dot creates an empty cell. Try doing that with Flexbox without adding a dummy div!

The best part? This technique is incredibly easy to debug. You can literally read your layout structure right there in your CSS. When was the last time you could do that with a complex Flexbox layout?

Layout Challenge: Flexbox vs. Grid

Let's build almost the same layout using Flexbox and Grid template area.

The Flexbox Way (The Old Me)

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 600px;
}

.main-section {
  display: flex;
  gap: 1rem;
  flex: 1;

}

.sidebar {
  width: 256px;
}

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-content {
  flex: 1;
}

.widgets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Here's the outcome:

We ended up playing a game of container Tetris:

• A flex container for the overall layout (column direction)
• Another flex container for the middle section (row direction)
• Yet another flex container for the main content area (column direction)
• And finally, a grid (yes, I cheated) for the widgets

Each container needs its own set of flex properties, breakpoint adjustments, and specific fixes for edge cases.

The Grid Way

.dashboard {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "header header"
    "sidebar main"
    "sidebar widgets"
    "footer footer";
  grid-template-columns: 256px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
.widgets { grid-area: widgets; }
.footer { grid-area: footer; }

Result:

Now look at the Grid solution. One container. One property set. The layout is literally drawn in the CSS. And if you want to move things around for mobile? Just redraw the layout – no need to touch the HTML or add complex order properties.

The best part? The code is self-documenting. Anyone can look at those grid-template-areas and instantly understand the layout.

And here's the kicker: the Grid solution handles edge cases better too. Like if you want the sidebar to stretch full height? Or is it the widgets to align perfectly? They just do.

No more fighting with align-items and justify-content combinations.

The key differences are clear:

• Flexbox: 20+ lines of CSS, multiple nested containers, complex responsive adjustments

• Grid: 12 lines of CSS, single container, intuitive layout definition

Breaking Down the Benefits

After using Grid Template Areas for a while, I've noticed some serious advantages that make me wonder why I was stubbornly sticking to Flexbox for so long. Let me break them down for you.

1. Readability That Actually Makes Sense

Remember looking at your CSS from six months ago? With Flexbox, it usually goes like this:

/* Wait, why did I need flex-direction: column here again? */
.dashboard-container {
  display: flex;
  flex-direction: column;
}

/* Which element was this supposed to align again? */
.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

Now look at Grid Template Areas:

.dashboard {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "sidebar footer footer";
}

It's like reading a blueprint. Even your non-technical project manager can understand this layout! Try explaining justify-content: space-between to them and watch their eyes glaze over.

2. Responsive Design That Makes Sense

Remember the days of:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .sidebar {
    order: -1;
  }
  /* 20 more lines of overrides */
}

With Grid Template Areas, it's just:

@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "sidebar"
      "content"
      "footer";
    grid-template-columns: 1fr;
  }
}

That's it. No need to override individual item properties or fight with order values. Just redraw your layout and let Grid handle the rest.

3. Development Speed That Will Make Your PM Happy

Think about the last time you had to implement a complex layout:

• With Flexbox: "Let me try this... no, maybe if I nest another container... hang on... why isn't this working?"
• With Grid Areas: "Header goes here, sidebar there, content here. Done!"

The visual nature of Grid Template Areas means you spend less time debugging and more time actually building features that matter.

4. Browser Support

"But what about browser support?" I hear you ask. Well, unless you need to support Internet Explorer (and let's be honest, who does in 2024?), you're good to go. Grid Template Areas has excellent browser support across all modern browser.

When to Still Use Flexbox

Look, I may be excited about Grid Template Areas, but I'm not a CSS extremist. Flexbox isn't dead – it's just been miscast in the wrong role sometimes. Here's when I still reach for our old friend Flexbox:

Navigation Bars and Toolbars

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

Perfect! This is what Flexbox was born to do. When you need items to flow naturally in a single direction with some spacing, Flexbox is still your best friend.

Dynamic Content Groups

If you're dealing with a list of items that might grow or shrink (think: tags, chips, or buttons), Flexbox's wrapping behavior is still unmatched:

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

Component-Level Alignment

Need to center that icon with text? Flexbox:

.button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

Simple, clean, and exactly what you need.

The Perfect Partnership

The real pro move? Use both! Here's my rule of thumb:

• Grid Template Areas for the overall page layout
• Flexbox for component-level alignment and flow

Conclusion

Here's my challenge to you: Take your next project and try Grid Template Areas for the main layout. Just try it. You might feel a bit awkward at first (I sure did), but push through that discomfort. Draw your layout in ASCII art. Embrace the visual approach.

I bet you'll have that same "aha!" moment I had. That moment when you realize that sometimes the best solution isn't about fighting with nested containers or remembering complex property combinations – it's about having a clear visual representation of what you're trying to build.

And hey, if you don't end up loving it as much as I do? Flexbox will still be there, waiting for you with open arms and perfectly centered content. But I have a feeling you won't go back – at least not for your layout needs.

Happy coding! And remember, the next time you find yourself nesting flex containers, there might be a better way. 😉

If you found this post helpful, let's continue the conversation! I love discussing CSS techniques, sharing dev tips, and learning from other developers' experiences.

👉 Follow me @Peboydcoder

I share lots more CSS tricks, web development tips, and random coding adventures over on X (formerly Twitter). Drop by and say hello! Whether you have questions about Grid Template Areas, want to share your own CSS discoveries, or just want to connect with fellow developers, I'd love to hear from you.

And hey, if this post helped make your layouts a bit easier, a share would mean the world to me! 🙏