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

Sıradaki ders: Grid-template-areas

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler