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

Sıradaki ders: Grid-template-columns

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler