CSS Multi-column Layout

CSS içeriklerine display özelliklerinin ardından yine bu konuyla ilintili olarak multi-column layout ile devam edebiliriz.
AA

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.

CSS Text

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.

CSS Column Count

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.

CSS Column Width

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

Kaynakça

  1. CSS Multi-column Layout Module Level 1 ↩
  2. Basic Concepts of Multicol, @MDN web docs ↩
  3. columns, @MDN web docs ↩
  4. Styling Columns, @MDN web docs ↩
  5. Handling content breaks in multicol, @MDN web docs ↩
  6. Spanning and Balancing Columns, @MDN web docs ↩
  7. column-span, @MDN web docs ↩
  8. Handling Overflow in Multicol, @MDN web docs ↩
  9. CSS Multi-column Layout, @MDN web docs ↩
  10. column-gap (grid-column-gap), @MDN web docs ↩
Yorum alanını göster
Beğendim
Beğenmedim