Grid-row
grid-row ile öğelerin satır boyunca yerleşimini öğrenirsin.
grid-row: satır boyunca yerleşim
Tıpkı grid-column gibi, grid-row da bir öğenin satır boyunca nereye yerleşeceğini söyler. Değer yine çizgi numaraları ile yazılır: grid-row: 1 / 3 öğeyi 1. satır çizgisinden 3. satır çizgisine koyar.
Bu, bir banner ya da afişin iki satırı dikey olarak kapsamasını istediğinde işe yarar. Yan menü de yüksek olduğunda birden çok satır kapsayabilir.
Dikey kapsama pratikleri
Bir yan menü ızgaranın solunda tüm satırları kapsayabilir: grid-row: 1 / span 3 onu 1. çizgiden başlatıp üç satır yüksek tutar. Ana içerik ise yalnızca tek satırda kalır.
Bu yöntem, eski tablo düzeni yerine geçer; satır sayısı değişse de menü her zaman en alt satıra kadar iner. Duyarlı (responsive) tasarımda da kolayca uygulanır.
Sidebar ve ana içerik
Bir blog sayfasında sidebar genelde sol veya sağda, ana içerik kadar uzanır. grid-row: 1 / span 4 ile sidebar 1. çizgiden başlayıp dört satır kapsar; ana içerik tek tek hücrelere bölünür.
Bu denge, sayfanın görsel ritmini kurar. Sidebar ne kadar uzun olursa, okurun gözü o kadar çok kenarda dolaşır; bu yüzden önemli menü oraya konur.
Uygulama Banner'ı iki satır kapsacak biçimde yerleştir
Reklam .banner öğesi 1. satır çizgisinden başlayıp 2 satır kapsasın. Yalnızca .banner stil bloğu içinde grid-row bildirimini yaz.
Örnek çözümü göster
.banner {
grid-row: 1 / span 2;
}Kendini test et
-
grid-row: 1 / span 2 ifadesi ne anlama gelir?
.banner { grid-row: 1 / span 2; }- 1. satırı iki kez göster
- 1. satırı gizle, 2. satırı göster
- 1. satır çizgisinden başla ve 2 satırı kapsa
- 1. ve 2. satır çizgilerini birleştir
Cevabı göster
1. satır çizgisinden başla ve 2 satırı kapsa — Doğru. 1. çizgiden başlanır ve span 2 iki satır kapsar.
-
Banner iki satır kapsasın
.banner { grid-row: 1 / ____; }Cevabı göster
.banner { grid-row: 1 / span 2; } -
grid-row değerini anlamıyla eşleştir
- grid-row: 1 / 3
- 1. satırdan 3. satıra
- grid-row: 1 / span 2
- 1. çizgiden 2 satır
- grid-row: 2 / 4
- 2. satırdan 4. satıra
- grid-row: auto
- Otomatik yerleşim