Grid-column
grid-column ile öğelerin sütun boyunca yerleşimini öğrenirsin.
grid-column: sütun boyunca yerleşim
Bir ızgara (grid) düzeninde her öğe varsayılan olarak bir hücre kaplar. grid-column bildirimi ile bir öğenin kaç sütunu kapsayacağını belirleyebilirsin. Böylece başlık, banner veya görsel birden çok sütuna yayılır.
Değer, sütun çizgi numaraları (line numbers) ile yazılır: grid-column: 1 / 4 öğeyi 1. çizgiden 4. çizgiye kadar yerleştirir; yani üç sütunu kapsar.
span anahtar kelimesi
Çizgi numarası yerine span anahtar kelimesini kullanabilirsin. grid-column: 1 / span 3, '1. çizgiden başla ve 3 sütun kapsa' demektir. grid-column: span 2 ise başlangıcı otomatik bırakır, yalnızca genişliği söyler.
Bu yazım tarzı, sütun sayısı sonradan değişse bile öğenin kapsama genişliğini korumak istediğinde kullanışlıdır. Magazin ve gazete düzenlerinde sık görülür.
Magazin ana haberi
Bir magazin ana sayfasında ana haber genellikle 2-3 sütunu kapsar; yan haberler tek sütunda kalır. grid-column: 1 / span 3 ile ana haberi ızgaranın başına yerleştirip üç sütuna yayabilirsin.
Bu teknik, görsel ağırlık yaratmanın en temel yoludur. Okurun gözü önce geniş öğelere kayar; bu yüzden en önemli içerik en geniş bölgeye konur.
Uygulama Ana haberi 3 sütuna yay
Magazin ızgarasında .hero öğesini 1. sütun çizgisinden başlatıp 3 sütun kapsacak şekilde yerleştir. Yalnızca .hero stil bloğu içinde grid-column bildirimini yaz.
Örnek çözümü göster
.hero {
grid-column: 1 / span 3;
}Kendini test et
-
grid-column: 2 / 5 ne yapar?
.item { grid-column: 2 / 5; }- Öğeyi 2. çizgiden 5. çizgiye yerleştirir
- Öğeyi 2. satırdan 5. satıra koyar
- 2. ve 5. sütunu gizler
- Toplam sütun sayısını 5 yapar
Cevabı göster
Öğeyi 2. çizgiden 5. çizgiye yerleştirir — Doğru. İki değer de sütun çizgi numarasıdır; öğe 2. çizgiden başlayıp 5. çizgide biter.
-
span ile 3 sütun kapsa
.hero { grid-column: 1 / ____; }Cevabı göster
.hero { grid-column: 1 / span 3; } -
grid-column değerini anlamıyla eşleştir
- grid-column: 1 / 3
- 1. çizgiden 3. çizgiye
- grid-column: 1 / span 3
- 1. çizgiden 3 sütun
- grid-column: 2 / 4
- 2. çizgiden 4. çizgiye
- grid-column: auto
- Otomatik yerleşim