grid-template-areas ve duyarlı ızgaralar nasıl çalışır?

Question

Accepted Answer

`grid-template-areas`, bölgeleri adlandırarak bir ızgarayı **görsel olarak** düzenlemenizi sağlar ve karmaşık sayfa düzenlerini okunabilir ve duyarlı bir şekilde yeniden düzenlemesi kolay hale getirir.

## Adlandırılmış alanları tanımlama

```css
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"   /* row 1: header spans both columns */
    "sidebar main"     /* row 2: sidebar | main */
    "footer  footer";  /* row 3: footer spans both */
  min-height: 100vh;
}

.header  { grid-area: header; }   /* assign each element to a named area */
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
```

ASCII sanatı `grid-template-areas` *layout'un kendisidir* — bir bakışta yapıyı görebilirsiniz ve bir adı tekrarlamak, bir bölgenin hücreler arasında uzanmasını sağlar.

## Mobil için yeniden düzenleme — haritayı yeniden çizin

```css
@media (max-width: 600px) {
  .layout {
    grid-template-columns: 1fr;        /* single column */
    grid-template-areas:
      "header"
      "main"      /* main now ABOVE sidebar on mobile */
      "sidebar"
      "footer";
  }
}
```

Mobil için tüm düzeni değiştirmek için, alan haritasını yeniden yazmanız yeterlidir — HTML ve `grid-area` atamaları aynı kalır. Bu, her öğeyi ayrı ayrı yeniden konumlandırmaktan çok daha temizdir.

## Bunun neden güçlü olduğu

- **Kendi kendini belgeleme** — CSS, işlenmiş düzeni görsel olarak yansıtır.
- **Kaynak sırasından bağımsız** — HTML sırası ne olursa olsun öğeler herhangi bir yere yerleştirilebilir (erişilebilirlik için DOM'da `main` öğesini önce koymak iyidir, ancak kenar çubuğunu görsel olarak önce göstermek).
- **Kolay duyarlı yeniden akış** — her kırılma noktası için alan şablonunu değiştirin.

## Neden önemli

Adlandırılmış ızgara alanları, sayfa düzeyindeki düzenleri (başlık/kenar çubuğu/ana/altbilgi) hem okunabilir hem de önemsiz şekilde duyarlı hale getirir — yeniden yapılandırma, konumları yeniden bağlamak yerine ASCII haritasını düzenlemenin bir meselesidir.

Bu, CSS'nin sunduğu en net ve en sürdürülebilir düzen tekniklerinden biridir.