Mastering CSS Grid Layout

CSS Grid Fundamentals

CSS Grid Layout is a powerful system for creating two-dimensional layouts.

Basic Grid Setup

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

Grid Areas

Grid areas allow you to create named template areas:

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