CSS3 ile Metni Sütunlara Bölme

Metni Sütunlara Ayırma

CSS3 column-count özelliğini kullanarak web sayfamızdaki istediğimiz metnin sütunlar halinde gösterilmesini sağlayabiliriz. Tek yapmamız gereken column-count özelliği ile metnin kaç sütuna ayrılacağını belirtmektir.

Tarayıcıların eski versiyonları için -webkit- ve -moz- ön ekleri kullanılmalıdır.

Yukarıdaki örnekte haber class'ı uygulanan elemanlar içindeki metnin 3 sütuna ayrılması sağlanmıştır.

Sütunlar Arasındaki Boşluğu Ayarlama

Metin sütunlara ayrılmış ise bu sütunlar arasında bırakılacak boşluk miktarını column-gap özelliği ile belirleyebiliriz.

Sütunlar Arasına Çizgi Koyma

Sütunlar arasında varsayılan olarak çizgi olmayacaktır. Çizgi kullanmak istiyorsak column-rule-style özelliği ile çizginin stilini, column-rule-width özelliği ile de kalınlığını belirleyebiliriz.

Ayrıca column-rule-color özelliği kullanılarak sütunlar arasındaki çizginin rengi belirlenebilir.

Bu üç özellik column-rule özelliği ile tek satırda da belirtilebilir.

İstenilen Yerlerde Sütunları Birleştirme

Sütunlara ayrılmış bir metnin içindeki bazı elemanların birden fazla sütunluk yer kaplaması istenebilir. Örneğin metin içindeki başlıkların sütunlara bölünmeden tam satır halinde gösterilmesi, ardından metnin tekrar sütunlar halinde devam etmesi sağlanabilir.

Aşağıdaki örnekte div elemanı içindeki metin 3 sütuna bölünmüş, h1, h2 etiketlerinin ise tüm satırı kaplaması yani sütunlara ayrılmaması sağlanmıştır.

All değeri o elemanın tüm sütunları kaplamasını sağlar.

KONU İLE İLGİLİ ÖRNEKLER