Gap çoklu sütun
column-count ve column-gap ile çoklu sütun düzenini öğrenirsin.
Çoklu sütun nedir?
Gazete ve dergilerdeki gibi, uzun bir metni sütunlara bölmek için column-count özelliğini kullanırsın. column-count: 3 yazdığında metin otomatik olarak üç sütuna ayrılır; tarayıcı sütun yüksekliklerini dengeler.
Sütunlar arasındaki boşluğu column-gap ile ayarlarsın. column-gap: 2rem sütunlara nefes aldırır. Daha ince denetim için column-width de verebilirsin.
column-rule ile ayraç çiz
Sütunların arasına bir ayraç çizgi eklemek için column-rule özelliğini kullanırsın. Bu, border'a benzer; kalınlık, biçim ve renk tek satırda verilir.
Örneğin column-rule: 1px solid #ccc; sütunlar arasına ince gri bir çizgi çizer. Çizgi, sütunlar arası boşluğun tam ortasında durur; metinle çakışmaz.
Uygulama Makaleyi üç sütuna böl
.article seçicisine üç bildirim ver: column-count: 3, column-gap: 2rem ve column-rule: 1px solid #ccc. Böylece makale üç sütuna bölünür ve sütunlar arasına ince gri çizgi çizilir.
Örnek çözümü göster
/* makaleyi üç sütuna böl */
.article {
column-count: 3;
column-gap: 2rem;
column-rule: 1px solid #ccc;
}Kendini test et
-
Hangisi metni sabit üç sütuna böler?
- column-count: 3
- column-width: 3
- columns: 3px
- display: column-3
Cevabı göster
column-count: 3 — Doğru. column-count: 3 metni üç sütuna böler.
-
column-count özelliğini yaz
.article { ____: 2; column-gap: 2rem; }Cevabı göster
.article { column-count: 2; column-gap: 2rem; } -
Çoklu sütun özelliklerini eşle
- column-count
- Sütun sayısı
- column-gap
- Sütun aralığı
- column-rule
- Ara çizgi
- column-width
- Sütun genişliği