CSS3: Çoklu Sütunlar

Merhabalar. Geçen hafta yine internette gezinirken gözüme çarpan bir css3 özelliğini bu gün bir sitede kullanmam gerekti. Baktım genel olarak işimize yarayacak bir şey, buradan da paylaşayım dedim.

Uzun uzadıya yazılar veya listeler var ise önünüzde, ve onları tablo kullanmadan ve uğraşmadan ikiye üçe dörde falan bölmek istiyorsanız, kolaylıkla halledebileceğiniz bir css kodu ile karşınızdayım. Gazetelerde falan gördüğümüz tarzda yazıları sütunlara ayırarak hem sitenin görünüşüyle alakalı olan sıkıntıyı ortadan kaldırabiliyoruz hem de daha az yer kaplıyor ve daha zengin görünüyor. Ve de farklı..

Aşağıda mantığı anlamanız için bir iki kod yazıyorum. Ama bir de düz yazı şeklinde anlatayım. Sütunlara ayırmak istediğimiz içeriğin hemen üst divi olarak sutun ayırma stil kodlarımızı yazacağımız bir div açıyoruz. Kapsayan div. İd veya class farketmiyor. Daha sonra da stil dosyamızdan aşağıda verdiğim kodları ekliyoruz. Dilediğimiz kadar sütun ayarlayabiliyoruz sayılarla oynayarak. Gayet basit ama bazen çok gerekli bir kod işte.

Html kodlarımız;

[code]

<div id="coklusutun">

<p>Mesela falan filan burası uzun bir yazı.</p>

</div>

[/code]

CSS Kodlarımız;

[code]

#coklusutun{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

[/code]

Kolay gelsin, görüşmek üzere!