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

Sıradaki ders: Grid-row

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler