CSS Multi-column Layout
CSS içeriklerine display özelliklerinin ardından yine bu konuyla ilintili olarak multi-column layout ile devam edebiliriz.
float
ve display: inline | inline-block
özelliği ile gerçekleştirdiğimiz sütun bölme işlemlerinde eğer metin ile ilgili sütun ayrımı yapılacaksa sütunları önceden belirlemek ve/veya karakterkelime sayısı üzerinden işlem yapmak gerekmekteydi. Column modülü bu süreçte karşılaştığımız problemlerin çözümü olarak işlemlerin tamamen tarayıcı tarafından gerçekleştirilesini sağlamakta.
CSS Multi-column Layout
CSS Multi-column Layout, içerikler için çok sütunlu yapılar oluşturabilmemizi sağlayan bir CSS modülüdür. Bu modül sayesinde, tıpkı gazete ve dergilerde olduğu gibi web sayfalarımızda da içerikleri modülün sunduğu kurallar çerçevesinde sütunlara (column) bölebiliriz1. Bu kurallar sütun sayısının ve içeriğin sütunlardan sütuna nasıl akması (flow) gerektiği, sütunlar arasındaki boşluk boyutları (gap size) ve sütun bölme çizgileri (dividing line) gibi tanımları yapabilmekteyiz. Aşağıdaki gibi bir metnimiz olsun ve bu metni 4 sütuna bölmek isteyelim2 3.

Bu durumda metinleri ayrı elementler içerisinde block
olarak yönetmemiz gerekecekti. Ancak ve şayet çok spesifik isteklerimiz yok ise (başlıkların sütunların ilk satırında yer alması vb.) metinleri column modülü ile sütun sayısı ve sütunlar arası boşlukları belirterek kolaylıkla sütunlara ayırabiliriz4 5.
#content {
column-count: 4;
column-gap: 3em;
column-rule: 1px solid #d78e5c;
}
Bu işlem için ilgili metnin bulunduğu elementi kullanmamız gerekmekte.

Görüldüğü üzere pratik bir şekilde metinlerimizi istediğimiz sayıda sütuna bölebiliyoruz. Peki, kullanılabilecek bu özellikler neler?
Column-count
column-count
özelliği içeriğin kaç eşit sütuna bölüneceğini belirler. Örneğin, column-count: 4;
ilgili içeriğin 4 eşit sütuna bölünmesini sağlayacaktır. column-count
yerine belirteceğimiz bir genişlik değeri üzerinden column sayısının tarayıcı tarafından belirlenmesini de isteyebiliriz. Bu durumda kullanacağımız özellik column-width
olacaktır6 7.
#content {
column-width: 250px;
column-gap: 3em;
column-rule: 1px solid #d78e5c;
}
Yukarıdaki kodu uygulamamızın ardından elde edeceğimiz tarayıcı yorumu aşağıdaki görseldeki gibi olacaktır.

Column-gap
column-count
ile oluşturulan sütunlar arasındaki boşluğu (gap / gutter) column-gap
ile belirtiriz. Herhangi bir birim ile ifade edilebilir.
column-gap: normal | 2rem | 10px | 10%
Column-rule
column-rule
sütunların boşluğun yanı sıra dikey çizgi (line) ile bölünmesini sağlar. border
özelliğindeki gibi kullanımı vardır. Örnek kullanımı;
column-rule: 1px solid #d78e5c;
/* ya da */
column-rule-color: #d78e5c;
column-rule-style: solid;
column-rule-width: 1px;
Column-span
column-count
ile oluşturduğumuz sütun(lar)da bulunan bir elementin tüm sütunları kaplamasını isteyebiliriz. Örneğin, heading etiketlerini (h1, h2, h3…) ele alalım. Bu etiketlerin sütun içeriğinde kalmamasını ve tüm sütunları bölerek görüntülenmesini isteyelim. h1, h2, h3 { column-span: all; }
ile heading etiketlerinin ayrı bir şekilde konumlandırılmasını sağlayabiliriz. column-span
kullanımında belirtilen elementten sonraki metin yine belirttiğimiz sütun sayısı üzerinden ayrıca bölümlendirilmektedir. Unutmadan, column-span
şu değerleri alabilir 8 9 10.
/* Keyword değerler */
column-span: none;
column-span: all;
/* Global değerler */
column-span: inherit;
column-span: initial;
column-span: unset;
Kısayol: Columns
Bir elementin column-width
ve column-count
değerlerini tek bir seferde tanımlamak için columns
özelliğinden faydalanabiliriz.
columns: 2 | 6rem auto | 12em;
Yukarıda yer alan başlıklara dair Codepen örneğini inceleyebilirsiniz. Bu yazı serisinin bir sonraki başlığı grid modülü olacak.
İleri Okumalar
- Guide to Responsive-Friendly CSS Columns
- Introducing the CSS3 Multi-Column Module
- Create Columns Easily With The CSS3 Multi-Column Layout Module
Kaynakça
- CSS Multi-column Layout Module Level 1 ↩
- Basic Concepts of Multicol, @MDN web docs ↩
- columns, @MDN web docs ↩
- Styling Columns, @MDN web docs ↩
- Handling content breaks in multicol, @MDN web docs ↩
- Spanning and Balancing Columns, @MDN web docs ↩
- column-span, @MDN web docs ↩
- Handling Overflow in Multicol, @MDN web docs ↩
- CSS Multi-column Layout, @MDN web docs ↩
- column-gap (grid-column-gap), @MDN web docs ↩