Css Column Kullanımı

Bu yazımızda 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.

CSS COLUMN COUNT ÖZELLİĞİ

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.

CSS COLUMN GAP ÖZELLİĞİ

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.

CSS COLUMN RULE ÖZELLİĞİ

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 özelliği ile tek seferde de verebiliriz.

Örneğin sütunlar arasında 5px kalınlığında, mavi renkli, düz bir ayıraç koyalım.

CSS COLUMN WİDTH ÖZELLİĞİ

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.

CSS COLUMN SPAN ÖZELLİĞİ

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.

CSS COLUMNS ÖZELLİĞİ

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.

TARAYICI DESTEĞİ

Ö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 tabloda, 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.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Leave a Reply

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