Grid-template-columns
grid-template-columns ile sütun yapısını öğrenirsin.
Sütun yapısını çiz
grid-template-columns bildirimi sütun genişliklerini sırayla yazar. Her değer boşlukla ayrılır; kaç değer yazarsan o kadar sütun oluşur. grid-template-columns: 200px 200px iki sabit sütun; 1fr 1fr 1fr ise üç eşit sütun verir.
Bu sütunlara ızgara izi (grid track) denir. Bir iz, iki ızgara çizgisi arasındaki boşluktur. Sütun izleri yatayda, satır izleri dikeyde uzanır.
fr birimi
fr (fraction) ızgaraya özgü esnek bir birimdir. Kapsayıcıda kalan boş alanı, yazdığın fr değerleri oranında böler. 1fr 2fr demek: ikinci sütun birincinin iki katı genişlikte olur.
Sabit px veya % değerleriyle de karıştırabilirsin. 200px 1fr yazarsan ilk sütun 200 piksel sabit kalır; ikinci sütun geri kalanı kaplar. Böylece yan menü + içerik yerleşimi kolayca kurulur.
Uygulama Üç eşit sütunlu kart ızgarası
.cards seçicisi zaten display: grid içeriyor. grid-template-columns: 1fr 1fr 1fr bildirimini ekle; böylece üç eşit sütun oluşur.
Örnek çözümü göster
.cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}Kendini test et
-
Hangisi üç eşit sütun oluşturur?
.cards { display: grid; grid-template-columns: ? }- grid-template-columns: 3fr
- grid-template-columns: 1fr 1fr 1fr
- grid-template-columns: 3cols
- grid-columns: 3
Cevabı göster
grid-template-columns: 1fr 1fr 1fr — Doğru. 1fr 1fr 1fr üç eşit sütun verir; her biri kalan alanın üçte birini alır.
-
İki sütun, ikincisi iki kat geniş
.layout { display: grid; grid-template-columns: ____; }Cevabı göster
.layout { display: grid; grid-template-columns: 1fr 2fr; } -
Sütun değerini açıklamasına eşle
- 1fr 1fr 1fr
- Üç eşit sütun
- 200px 1fr
- Sabit + esnek
- 1fr 2fr
- Oranlı iki sütun
- 50%
- Yüzde ile tek sütun