A Practical Guide to CSS Grid Areas

grid-template-areas, karmaşık sayfa düzenlerini isimlendirilmiş bölgelerle okunaklı hale getirir.

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

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

Mobilde tek sütuna indirmek için sadece grid-template-areas ve grid-template-columns'u medya sorgusu içinde yeniden tanımlamak yeterli:

@media (max-width: 640px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Bu yaklaşım, float ya da iç içe flexbox'lara kıyasla düzeni çok daha okunabilir kılar.