Grid-area

grid-area ile öğeleri bölgelere yerleştirirsin.

grid-area: öğeyi bölgeye yerleştir

grid-template-areas ile bölgelere isim verdikten sonra, grid-area bildirimi her öğeyi istenen bölgeye yerleştirir. Örnek: .panel { grid-area: main; } .panel öğesini main adlı bölgeye koyar.

İsim, tırnak işareti olmadan yazılır. Bölge adı grid-template-areas içinde tanımlıysa öğe oraya gider; tanımlı değilse yeni bir isim alanı oluşturulur.

Sayısal form: 1 / 1 / 2 / 3

Bölge adı yerine dört sayı da verebilirsin: grid-area: 1 / 1 / 2 / 3. Sırayla satır başlangıcı / sütun başlangıcı / satır sonu / sütun sonu anlamına gelir. Yani grid-row-start / grid-column-start / grid-row-end / grid-column-end.

Sayılı yazım esnektir ama okunması zordur. Bölge ismi mümkün olduğunda onu tercih et; sayılı formu yalnızca otomatik üretilen ızgaralarda kullan.

Bölgeye göre bileşen yerleşimi

Bir dashboard ızgarasında üst bilgi, yan panel, içerik ve alt bilgi bölgeleri olabilir. Her bileşene grid-area ile bölge adı verirsen; HTML sırası değişse bile düzen bozulmaz.

Bu yaklaşım, bileşen tabanlı tasarımın temelidir. Bileşeni bir bölgeye bağlamak, kodu yeniden düzenlerken esneklik kazandırır.

Uygulama Paneli main bölgesine yerleştir

.panel öğesini main adlı bölgeye yerleştir. Yalnızca .panel stil bloğu içinde grid-area bildirimini yaz.

Örnek çözümü göster

.panel {
  grid-area: main;
}

Kendini test et

grid-area: main ne yapar?
```
.panel {
  grid-area: main;
}
```
- main adında yeni bir bölge tanımlar
- main etiketli tüm öğeleri seçer
- Sayfayı main adıyla yeniden adlandırır
- Öğeyi main adlı bölgeye yerleştirir
Cevabı göster

Öğeyi main adlı bölgeye yerleştirir — Doğru. grid-area: main öğeyi main bölgesine yerleştirir.

Paneli main bölgesine koy

.panel {
  grid-area: ____;
}

Cevabı göster

.panel {
  grid-area: main;
}

grid-area değerini etkisiyle eşleştir

grid-area: header

header bölgesine yerleş
grid-area: main

main bölgesine yerleş
grid-area: 1 / 1 / 2 / 3

1. satır 1. sütundan başla
grid-area: auto

Otomatik yerleşim

Sıradaki ders: Minmax fonksiyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler