CSS Grid Layout Guide

CSS Grid is the most powerful layout system in CSS. It handles rows and columns simultaneously.

Basic Grid

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

When to Use Grid vs Flexbox

• Grid: Two-dimensional layouts (entire pages, card grids)
• Flexbox: One-dimensional layouts (navbars, toolbars, centering)

Grid excels at macro layout. Flexbox excels at micro layout.