Modern CSS: Grid, Flexbox, and Container Queries

Responsive design has come a long way. With modern layout techniques like Flexbox, CSS Grid, and Container Queries, building dynamic, adaptive interfaces is easier and more powerful than ever. In this guide, we’ll explore how and when to use each of these tools effectively.

1. Flexbox – One-Dimensional Layouts

Flexbox is perfect for distributing space along a single axis—horizontal or vertical.

Basic Example

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <div>Left</div>
  <div>Right</div>
</div>

Common Use Cases

• Navigation bars
• Vertical centering
• Equal-height columns

✅ Simple and powerful for rows or columns ❌ Not ideal for complex grids

2. CSS Grid – Two-Dimensional Layouts

CSS Grid allows you to build complex layouts with rows and columns.

Basic Example

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Advanced Features

• Named grid areas
• Fractional units (fr)
• Auto-placement
• Implicit and explicit grids

Grid Template Areas Example

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

✅ Ideal for page layouts ✅ Precise alignment and spacing ❌ Slightly more verbose than Flexbox

3. Container Queries – Responsive Components

Traditionally, responsiveness was driven by viewport width (media queries). But now we have container queries, which respond to the size of their parent container.

Why Use Container Queries?

They let you create truly modular components that adapt based on how much space they’re given—not just the screen size.

Example

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card-content {
    display: flex;
    gap: 1rem;
  }
}

<div class="card">
  <div class="card-content">
    <img src="..." />
    <p>Some content</p>
  </div>
</div>

✅ Component-level responsiveness ✅ Ideal for design systems ❌ Still gaining browser support (check before use)

4. When to Use What?

Tool	Best For	Layout Type
Flexbox	Simple rows/columns	One-dimensional
CSS Grid	Page and complex layouts	Two-dimensional
Container Queries	Component-level breakpoints	Context-aware

5. Combining Techniques

Use these techniques together for maximum power:

<header class="grid-header">...</header>
<main class="content-grid">
  <aside class="sidebar">...</aside>
  <section class="article">...</section>
</main>
<footer class="flex-footer">...</footer>

• Use Grid for overall page layout
• Use Flexbox for content alignment within sections
• Use Container Queries for component responsiveness

6. Modern Tools & Utilities

• Tailwind CSS: Utility-first framework with Flexbox and Grid support
• CSS Modules / SCSS: Scoped styles for modular design
• PostCSS + Autoprefixer: For cross-browser compatibility

7. Performance & Accessibility

• Avoid fixed heights/widths unless necessary
• Use semantic HTML for better accessibility
• Test responsiveness across real devices and screen readers

Conclusion

Modern CSS tools like Grid, Flexbox, and Container Queries offer unmatched control over layouts. By understanding their strengths and using them together, you can build UIs that are flexible, maintainable, and beautiful across devices.

Resources

• CSS Tricks – A Complete Guide to Flexbox
• CSS Grid Layout Guide
• Container Queries
• Can I Use – CSS Container Queries

---

CSS has never been more powerful. Subscribe to my blog for tips on advanced layouts, responsive design systems, and CSS-in-JS integrations.