Modern CSS Layouts: Grid and Flexbox Mastery

Creating responsive layouts has never been easier thanks to CSS Grid and Flexbox. In this guide, we'll explore both technologies and learn when to use each.

Flexbox: One-Dimensional Layouts

Flexbox excels at distributing space along a single axis (row or column).

Basic Flexbox Container

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

Common Flexbox Patterns

Navigation Bar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

Card with Footer at Bottom

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-content {
  flex: 1; /* Takes remaining space */
}

.card-footer {
  margin-top: auto; /* Pushes to bottom */
}

CSS Grid: Two-Dimensional Layouts

Grid is perfect for complex, two-dimensional layouts where you need control over both rows and columns.

Basic Grid Setup

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

Responsive Grid with Auto-Fit

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

This creates a responsive grid that automatically adjusts the number of columns based on available space!

Named Grid Areas

For complex layouts, named areas are incredibly useful:

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

When to Use Which?

Use Flexbox For:

• Navigation bars
• Card components
• Centering content
• Simple row/column layouts
• When content size should determine layout

Use Grid For:

• Page layouts
• Card grids
• Complex two-dimensional layouts
• When you need precise control over both axes
• Overlapping elements

Practical Examples

Blog Post Grid

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}

/* Featured post spans full width */
.blog-grid .featured {
  grid-column: 1 / -1;
}

Holy Grail Layout

.holy-grail {
  display: grid;
  grid-template: 
    "header header header" auto
    "nav main aside" 1fr
    "footer footer footer" auto
    / 200px 1fr 200px;
  min-height: 100vh;
}

/* Make it responsive */
@media (max-width: 768px) {
  .holy-grail {
    grid-template:
      "header" auto
      "nav" auto
      "main" 1fr
      "aside" auto
      "footer" auto
      / 1fr;
  }
}

Modern CSS Features

Container Queries

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

@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

Subgrid

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

.child {
  display: grid;
  grid-column: span 3;
  grid-template-columns: subgrid; /* Inherits parent columns */
}

Conclusion

CSS Grid and Flexbox are complementary tools. Use Flexbox for component-level layouts and Grid for page-level structures. Combined, they give you the power to create any layout you can imagine without hacks or workarounds.

The best approach? Start with Grid for your overall page structure, then use Flexbox for the components within it.