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