CSS Grid Areas

CSS Grid Areas — a practical guide to CSS grid-template-areas with clear examples you can reuse in real projects.

CSS Tutorial Series (70/109). Prefer one article? Read the complete CSS tutorial.

Short description

Excellent for responsive rearranging of header/main/sidebar/footer.

Areas

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