Grid-template-rows

grid-template-rows ile satır yapısını öğrenirsin.

Satır yapısını çiz

grid-template-rows bildirimi satır yüksekliklerini sırayla yazar; tıpkı grid-template-columns gibi. Her değer bir satır izine karşılık gelir. grid-template-rows: 100px 200px iki satır oluşturur; birincisi 100 piksel, ikincisi 200 piksel yükseklikte.

Satır sayısı çocuk sayısıyla aynı olmak zorunda değildir. Daha fazla çocuk varsa tarayıcı otomatik satırlar ekler; bu konuya ileriki derslerde değineceğiz.

Satır boyutlandırma seçenekleri

Satır yükseklikleri için üç yaygın değer vardır: sabit (100px), esnek (1fr) ve auto. auto satırı içeriği kadar yüksek yapar; metin uzadıkça satır da uzar.

Başlık + içerik düzeni sıkça grid-template-rows: auto 1fr biçiminde kurulur: üst satır başlığa göre boyutlanır, alt satır kalan yüksekliği doldurur. Böylece düzen ekran boyu değişse de bozulmaz.

Uygulama Pano ızgarası: sütun ve satır birlikte

.dashboard için hem sütun hem satır tanımla. display: grid, grid-template-columns: 1fr 2fr ve grid-template-rows: auto auto bildirimlerini ekle.

Örnek çözümü göster

.dashboard {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto;
}

Kendini test et

grid-template-rows ne tanımlar?
```
.board {
  display: grid;
  grid-template-rows: 80px auto;
}
```
- Sütun sayısını
- Sütun genişliklerini
- Satır yüksekliklerini
- Hücreler arası boşluğu
Cevabı göster

Satır yüksekliklerini — Doğru. grid-template-rows satır yüksekliklerini sırayla tanımlar; burada 80px ve auto.

Başlık sabit, içerik esnek

.page {
  display: grid;
  grid-template-rows: ____;
}

Cevabı göster

.page {
  display: grid;
  grid-template-rows: 100px auto;
}

Satır değerini açıklamasına eşle

auto

İçeriğe göre boyut
1fr

Kalan yüksekliği paylaş
100px

Sabit piksel yükseklik
80px 1fr

Sabit başlık + esnek gövde

Sıradaki ders: Grid gap

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler