Css Column Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te multiple columns (çoklu sütunlar) özellikleri nelerdir, nasıl kullanabiliriz onu öğreneceğiz.Bu özellikler ile var olan bir metni, gazete veya dergilerde olduğu gibi yan yana sütunlara ayırabiliriz.Şimdi sırasıyla bu özellikleri görelim.

1 – Column-count : Bu özellik ile yazımızı vereceğimiz değer kadar sütunlara ayırabiliriz.Örneğin bir <div> etiketi oluşturup içerisine uzunca bir yazı ekleyelim.Sonra da column-count özelliği ile bu yazıyı 4 sütun olacak şekilde bölelim.

2 – Column-gap : Bu özellik ile sütunlar arasındaki mesafeyi değiştirebiliriz.Örneğin column-gap özelliği ile sütunlar arasındaki mesafeyi 100px yapalım.

3 – Column-rule : Bu özellik ile sütunlar arasında tıpkı border özelliği gibi ayıraçlar kullanabiliriz.Bunun için ayıracın kalınlığını, stilini ve rengini belirtmemiz gerekiyor.Bu değerleri ayrı ayrı verebildiğimiz gibi column-rule ile tek seferde de verebiliriz.Örneğin sütunlar arasında 5px kalınlığında, mavi renkli, düz bir ayıraç koyalım.

4 – Column-width : Bu özellik ile sütunlara istediğimiz bir genişlik değeri verebiliriz.Örneğin her bir sütunun genişlik değerine 100px verelim.Yazımız ekran genişliğine göre sütunlara ayrılacaktır.Yani ekran genişliği 300px ise 3 sütun, 1000px ise 10 sütun olacaktır.

5 – Column-span : Bu özellik ile yazıya vermiş olduğumuz başlığın nerede olacağını belirleyebiliriz.Varsayılan olarak none değeri alır ve başlık ilk sütunda bulunur.Örneğin <h2> etiketi ile bir başlık tanımlayalım ve varsayılan değeri ile görünümüne bakalım.

Şimdi de column-span özelliğine all değeri vererek başlığın tüm sütunlara uygulanmasını sağlayalım.

6 – Columns : Bu özellik ile min genişlik ve max sütun sayısını birlikte vererek responsive özellik kazandırabiliriz.Kullanımı şu şekilde,

Örneğin min 100px genişliğinde, max 3 sütun olacak şekilde yazımızı sütunlara ayıralım.Responsive özelliğini kazandığını daha iyi görebilmek için tarayıcınızın ekran genişliği üzerinde değişiklik yaparak inceleyebilirsiniz.

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
column-count

50.0

4.0 -webkit-

10.0

52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1

column-gap

50.0

4.0 -webkit-

10.0

52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1

column-rule

50.0

4.0 -webkit-

10.0

52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1

column-span

50.0

4.0 -webkit-

10.0Desteklenmiyor

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1

column-width

50.0

4.0 -webkit-

10.0

52.0

2.0 -moz-

9.0

3.1 -webkit-

37.0

15.0 -webkit-

11.1

Bu resimde, tarayıcıların çoklu sütun özelliklerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 26 – Animation Kullanımı

Sonraki : Css Dersleri 28 – Gradient Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +