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.

<style>
div {
column-count:4;
}
</style>
<div>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

column-count:4;

}

</style>

<div>

Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.

</div>

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.

<style>
div {
column-count:4;
column-gap:100px;
}
</style>
<div>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

column-count:4;

column-gap:100px;

}

</style>

<div>

</div>

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.

<style>
div {
column-count:4;
column-gap:30px;
column-rule:3px solid cornflowerblue;
/* Değerleri ayrı ayrı da verebiliriz. */
/*        
column-rule-width:3px;
column-rule-style:solid;
column-rule-color:cornflowerblue;
*/
}
</style>
<div>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

column-count:4;

column-gap:30px;

column-rule:3px solid cornflowerblue;

/* Değerleri ayrı ayrı da verebiliriz. */

column-rule-width:3px;

column-rule-style:solid;

column-rule-color:cornflowerblue;

}

</style>

<div>

</div>

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.

<style>
div {
column-width:100px;
column-rule:3px solid cornflowerblue;
}
</style>
<div>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

column-width:100px;

column-rule:3px solid cornflowerblue;

}

</style>

<div>

</div>

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.

<style>
div {
column-count:3;
column-rule:3px solid cornflowerblue;
}
h2{
column-span:none;
}
</style>
<div>
<h2>Tincidunt integer eu augue augue</h2>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

column-count:3;

column-rule:3px solid cornflowerblue;

}

h2{

column-span:none;

}

</style>

<div>

<h2>Tincidunt integer eu augue augue</h2>

</div>

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

<style>
div {
column-count:3;
column-rule:3px solid cornflowerblue;
}
h2{
column-span:all;
}
</style>
<div>
<h2>Tincidunt integer eu augue augue</h2>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

column-count:3;

column-rule:3px solid cornflowerblue;

}

h2{

column-span:all;

}

</style>

<div>

<h2>Tincidunt integer eu augue augue</h2>

</div>

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,

columns: column-width column-count;

columns: column-width column-count;

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

<style>
div {
columns:100px 3;
column-rule:3px solid cornflowerblue;
}
</style>
<div>
Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.Tincidunt integer eu augue augue nunc elit dolor.
</div>

<style>

div {

columns:100px 3;

column-rule:3px solid cornflowerblue;

}

</style>

<div>

</div>

TARAYICI DESTEĞİ

Özellik

Chrome

Firefox

Safari

Opera

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.0

Desteklenmiyor

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.

Css Column Kullanımı

CSS COLUMN COUNT ÖZELLİĞİ

CSS COLUMN GAP ÖZELLİĞİ

CSS COLUMN RULE ÖZELLİĞİ

CSS COLUMN WİDTH ÖZELLİĞİ

CSS COLUMN SPAN ÖZELLİĞİ

CSS COLUMNS ÖZELLİĞİ

TARAYICI DESTEĞİ

Yazar Hakkında

Yorum Yazın

CSS COLUMN COUNT ÖZELLİĞİ

CSS COLUMN GAP ÖZELLİĞİ

CSS COLUMN RULE ÖZELLİĞİ

CSS COLUMN WİDTH ÖZELLİĞİ

CSS COLUMN SPAN ÖZELLİĞİ

CSS COLUMNS ÖZELLİĞİ

TARAYICI DESTEĞİ

Benzer Yazılar

Yazar Hakkında

Yorum Yazın