Grid container nedir?
display: grid ile ızgara kapsayıcısını öğrenirsin.
Izgara kapsayıcısı
CSS Grid, bir öğeyi ızgara kapsayıcısı (grid container) yaparak başlar. Tek satır yeterli: display: grid. Bu bildirim, doğrudan çocukları artık ızgara öğesi (grid item) olarak yerleştirir; tarayıcı onları satır ve sütunlara dizer.
Flexbox tek boyutluydu; grid ise iki boyutludur: aynı anda hem satırı hem sütunu denetlersin. Bu yüzden kart ızgaraları, panolar ve foto galerileri için idealdir.
Doğrudan çocuklar ızgara öğesi olur
Bir öğeye display: grid verdiğinde yalnızca doğrudan çocukları ızgara öğesi olur. Torunlar etkilenmez; onlar kendi iç yerleşimini korur.
Bu davranış Flexbox ile aynıdır: kapsayıcı belirlenir, çocuklar yerleşime dahil edilir. Şablonunda <div class="gallery"> içinde onlarca <figure> varsa, hepsi otomatik olarak ızgara hücresine düşer.
Henüz şablon yoksa
Bir kapsayıcıya display: grid verdiysen ama sütun ya da satır tanımlamadıysan, tarayıcı çocukları tek bir sütuna dizer. Yani her öğe kendi satırını kaplar; tıpkı normal akış gibi.
Asıl güç, sonraki derslerde göreceğin grid-template-columns ve grid-template-rows bildirimleriyle gelir. Önce kapsayıcıyı aç, sonra şablonu çiz.
Uygulama Galeriyi ızgara kapsayıcısı yap
Bir .gallery seçicisi ekle ve içine display: grid bildirimini yaz. Böylece galeri bir ızgara kapsayıcısı olur ve çocuklar ızgara öğesine dönüşür.
Örnek çözümü göster
/* galeri seçicisini ekle */
.gallery {
display: grid;
}Kendini test et
-
Hangisi bir öğeyi ızgara kapsayıcısı yapar?
.gallery { display: ? }- display: grid
- grid: auto
- layout: grid
- container: grid
Cevabı göster
display: grid — Doğru. display: grid bildirimi öğeyi ızgara kapsayıcısına dönüştürür ve çocukları ızgara öğesi yapar.
-
Galeriyi ızgara kapsayıcısı yap
.gallery { ____; }Cevabı göster
.gallery { display: grid; } -
Kavramları eşleştir
- display: grid
- Izgara kapsayıcısı
- grid item
- Kapsayıcının çocuğu
- grid container
- Üst öğe
- iki boyut
- Satır ve sütun