CSS Grid Named Areas for Readable Layouts

Complex CSS Grid layouts with numbered grid lines (grid-column: 1 / 3) are hard to understand and maintain. Changing the layout requires updating many grid-line numbers.

Use named grid areas for visual, maintainable layouts:

/* Desktop layout */
.layout {
  display: grid;
  grid-template-areas:
    'header  header  header'
    'sidebar content aside'
    'footer  footer  footer';
  grid-template-columns: 250px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Tablet: drop aside */
@media (max-width: 1024px) {
  .layout {
    grid-template-areas:
      'header  header'
      'sidebar content'
      'footer  footer';
    grid-template-columns: 200px 1fr;
  }
  .aside { display: none; }
}

/* Mobile: stack everything */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      'header'
      'content'
      'sidebar'
      'footer';
    grid-template-columns: 1fr;
  }
}

/* Dashboard with cards */
.dashboard {
  display: grid;
  grid-template-areas:
    'stats  stats  stats  stats'
    'chart  chart  table  table'
    'chart  chart  list   list';
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr 1fr;
  gap: 1rem;
}

Named grid areas create a visual ASCII representation of your layout right in the CSS. Changing the layout is as simple as rearranging the area names, and responsive changes are immediately readable.

Building complex responsive layouts