CSS Grid in the Real World: Layouts That Actually Work

Why Grid?

Flexbox is great for one-dimensional layouts, but CSS Grid shines when you need two-dimensional control — rows AND columns.

The Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  height: 100vh;
}

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

Named grid areas make your layout self-documenting. Anyone reading this CSS instantly knows the page structure.

Responsive Cards

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

This single declaration creates a responsive grid that adapts from 1 column on mobile to as many as will fit — no media queries needed.

Key Takeaway

Use Grid for page-level layouts and complex component arrangements. Use Flexbox for alignment within components. They complement each other perfectly.