Remember the days when making a two-column layout required nested divs, floats, clearfix hacks, and a whole lot of crossed fingers? Yeah, we’re done with that. CSS Grid is here, and it’s everything we wanted back then but didn’t know how to ask for. It gives you full control over both rows and columns, letting you create clean, responsive, and maintainable layouts without having to sacrifice your sanity. In this lesson, we’ll build a real-world layout using Grid, talk about when to use it vs. Flexbox, and polish up the About page on our course project.

CSS Grid vs Flexbox: Which One is Right for You?

Here’s the short version:

• Flexbox is for one-dimensional layouts. You control a single row or column at a time.
• Grid is for two-dimensional layouts. You control both rows and columns simultaneously.

If you need to build a layout like this:

          [ Header         ]
[ Sidebar ][Main ]
[ Footer         ]
        

Flexbox can kind of do it, but Grid does it elegantly. No nested containers. No mental gymnastics. Just clean, declarative CSS.

My Rule of Thumb?

If the layout depends on the relationship between rows and columns, use Grid. If it’s just aligning stuff in a line, Flexbox is probably enough.

Rows, Columns, and Areas: The Grid Trifecta

Let’s start simple and ramp up. First, define a grid container:

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

This gives you two columns: the first takes up 1 fraction of space, the second takes 2.

Add some boxes:

          <div class="container">
  <div class="item">One</div>
  <div class="item">Two</div>
</div>
        

Want to control rows too?

          .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 200px;
}
        

Boom—two rows, two columns.

Now, let’s talk about the coolest part of CSS Grid: named areas.

          .container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}
        

Then, assign elements to those areas:

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

This is huge. It lets you design like you're wireframing, not just stacking elements. Once I discovered grid-template-areas, I refactored an entire legacy layout in under an hour. It’s that powerful.

Your About Page: Layout with CSS Grid

Let’s apply Grid to our About page in the course project. We’ll give it a clean layout with a sidebar and main content, plus a header and footer.

HTML

          <div class="about-grid">
  <header class="header">About JSBites</header>
  <aside class="sidebar">
    <ul>
      <li><a href="#">Our Mission</a></li>
      <li><a href="#">The Team</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </aside>
  <main class="main">
    <h2>We Teach JavaScript Like Humans</h2>
    <p>No filler. No fluff. Just real-world dev knowledge taught by people who’ve been in the trenches.</p>
  </main>
  <footer class="footer">© 2025 JSBites</footer>
</div>
        

CSS

          .about-grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  padding: 2rem;
}

.header {
  grid-area: header;
  background: var(--color-primary);
  color: white;
  padding: 1rem;
  text-align: center;
  font-size: 1.5rem;
}

.sidebar {
  grid-area: sidebar;
  background: var(--color-light);
  padding: 1rem;
}

.main {
  grid-area: main;
  padding: 1rem;
  background: white;
}

.footer {
  grid-area: footer;
  background: var(--color-dark);
  color: white;
  text-align: center;
  padding: 1rem;
}
        

Now your About page has a clean, responsive, grid-based layout. Try shrinking the screen—Grid holds up beautifully with media queries. Speaking of which…

What’s Next?

You’ve learned how Grid gives you layout superpowers. But what happens when you shrink the browser or load your site on a phone? That’s where media queries and responsive design step in. In the next lesson, we’ll cover how to build responsive layouts that don’t break the internet in Responsive Design: Media Queries to the Rescue.