Css Makaleleri
HTML
Sayfayı Sütunlara bölme

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:

-webkit-column-count: 2 (chrome-safari için)
-moz-column-count: 2 (mozilla firefox için)
-o-column-count: 2 (opera için)
-ms-column-count: 2 (internet Explorer için)

Tüm Makaleler
Yasal Uyarı: Bu sitede yayınlanan her türlü ses, görüntü, yazı içeren bilgi ve belge, ticari marka ve her tür fikri mülkiyet hakkı , ilgili markalara aittir, yalnızca sahipleri tarafından ve sahiplerinin izni ile kullanılmaktadır ve telif hakları kapsamındadır. ©