Grid Template Areas & Alignment

grid-template-areas lets you lay out a page visually in CSS, using named regions instead of counting line numbers.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

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

Each quoted string in grid-template-areas represents one row, and each word represents a column's content in that row. Here, sidebar spans all three rows since it's repeated in every row string, while header, main, and footer each occupy one row next to it. This reads almost like ASCII art of the actual layout — a major readability advantage over tracking numbered grid lines.

Alignment inside grid cells works similarly to Flexbox:

.container {
  justify-items: center; /* horizontal alignment of items within their cells */
  align-items: center;    /* vertical alignment of items within their cells */
}

.single-item {
  justify-self: end;   /* override alignment for just this one item */
  align-self: start;
}

justify-items/align-items set a default alignment for every grid item, while justify-self/align-self override that default for one specific item — the same naming pattern Flexbox uses, making the two systems easier to learn together.

Grid and Flexbox aren't competitors — most real projects use Grid for the overall page/section structure and Flexbox for smaller components within it, like a row of buttons or a navbar.