CSS Grid Layout Complete Guide

Grid vs Flexbox

Grid is 2D (rows and columns), Flexbox is 1D (row or column). Use Grid for page layout, Flexbox for component layout.

Grid Basics

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.item { grid-column: 1 / 3; }

Named Grid Areas

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

Responsive Design

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