css kullanarak sayfalarımızı sütunlara bölebiliriz. Ama nasıl?
Paragraflarımızı sütunlara bölmek istiyorsak column-count özelliğini kullanabiliriz.
| column-count: 2 | paragraf iki sütuna böler |
| column-rule: solid 1px gray | sütun kenarlıklarını düz çizgi, 1px ve gri renkte yapar |
| column-gap: 2em | sütunlar arası uzaklığı belirler |
| column-span: all | column-count ile oluşturduğumuz sütunlarda bulunan bir etiketin örneğin bir başlığın tüm sütunları kaplamasını isteyebiliriz. Bu durumda column-span: all; değeri vererek başlık etiketlerinin ayrı bir şekilde konumlandırılmasını sağlayabiliriz. Başlıktan sonra gelen metin yine aynı sütun sayısı üzerinden bölünmeye devam eder. |
column-fill: Sütunların eşitliğini ayarlar. İki değer alır; balance veya auto
| column-fill: balance; | Her kolonu eşit yükseklikte olacak şekilde ayarlar. Zaten varsayılan başlangıç değeridir. |
| column-fill: auto; | Sütunları sıralı olarak doldurur. Bu özelliğin çalışması için html elemanına yükseklik değeri verilmesi gerekir. Belirlenen yükseklik değerine göre kolonları doldurur ve son kolona geri kalan içerik yerleştirilir, bazen kolonlar boşta kalabilir |
column-width: Kolonların genişliğini belirler
Örnek:
column-width: 250px;
Bu durumda sayfamız 250’şer piksellik sütunlara bölünecektir.
columns:Responsive özelliği vermek için kullanılır.
Örnek:
columns: 300px 3;
Bu durumda sayfamız 3 sütuna ayrılacak ama sayfa küçüldüğünde 3
sütunluk özelliğini kaybedecek ve minimum 300px yazdığımız için sütun sayısı
gittikçe küçülecek ve en son bir sütun kalacaktır.
Not: column özelliği css3 ile geldiği için tüm tarayıcılara uygun hale gelmesi için şu
işlemleri yapmalıyız: