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