Grid-template-areas

CSS kursu · Orta seviye · Ders 42/98

grid-template-areas ile adlandırılmış bölgeleri öğrenirsin.

grid-template-areas: adlandırılmış bölgeler

grid-template-areas bir ızgarayı adlandırılmış bölgelere (named regions) böler. Her satır çift tırnak içinde yazılır; bölge adları boşlukla ayrılır. Örnek: "header header" "main aside" iki satırlı bir düzen tanımlar.

Aynı isim yan yana tekrarlandığında o bölge birden çok sütunu kapsar. Bu yöntem, kodu okurken düzeni görsel olarak görmeni sağlar; en anlaşılır grid yazım tarzıdır.

Tırnak, nokta ve aynı isim

Her satır çift tırnak içinde yazılır; bölge adları arasına boşluk konur. Aynı isim yan yana gelirse bölge genişler. Boş bir hücre için nokta (.) kullanılır: "main ." main'i sol hücreye, sağ hücreyi boş bırakır.

Bölge adları yalnızca harf ve rakam içerebilir; boşluk ya da özel karakter olmaz. Tutarsız bir isim (ör. bir satırda 'header', diğerinde 'Header') kabul edilmez; büyük/küçük harf duyarlıdır.

Blog sayfası iskeleti

Tipik bir blog sayfası dört bölgeden oluşur: header (üst bilgi), main (yazılar), aside (yan menü), footer (alt bilgi). Hepsini tek bir grid-template-areas bildirimiyle kurabilirsin.

Bu yazım tarzı, ekran okuyucu ve kod okuyucu için aynı anlaşılırlığı taşır. Bir başkası koduna baktığında düzeni hemen görür; bu yüzden ekip çalışmalarında tercih edilir.

Uygulama Üç bölgelik bir düzen tanımla

.layout ızgarasında üç bölge tanımla: header (üst bilgi, iki sütun), main (asıl içerik) ve aside (yan kolon). İki satırlık bir düzen kur; ikinci satırda main ve aside yan yana olsun. Yalnızca grid-template-areas bildirimini yaz.

Örnek çözümü göster

.layout {
  grid-template-areas:
    "header header"
    "main aside";
}

Kendini test et

grid-template-areas hangi amaca yarar?
```
.layout {
  grid-template-areas:
    "header header"
    "main aside";
}
```
- Sütun genişliklerini belirler
- Adlandırılmış bölgelerle düzen kurar
- Satır yüksekliklerini belirler
- Izgaraya otomatik boşluk ekler
Cevabı göster

Adlandırılmış bölgelerle düzen kurar — Doğru. grid-template-areas bölgelere isim vererek görsel bir düzen kurar.

main bölgesini iki sütuna yay

.layout {
  grid-template-areas:
    "header header"
    ____;
}

Cevabı göster

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

Bölge adını rolüyle eşleştir

header

Üst bilgi bölgesi
main

Asıl içerik bölgesi
aside

Yan kolon bölgesi
footer

Alt bilgi bölgesi

Orta seviye bölümündeki tüm dersler

Grid-template-areas