css column-count özelliği, Html elementi sütun sayısını belirlemek için kullanılır. Gazetelerde yazıların yan yana birkaç sütunda yazıları gibi yapı oluşturmak için kullanırız.
Aldığı değerler :
auto : Otomatik değer alır. ( varsayılan 1 değeri atanır )
number : Verdiğimiz sayı değeri kadar sütun oluşur.
inherit : Bir üst elementten miras alır.
initial : Varsılan değere döner ( varsayılan değer : 1 )
Örnek : column-count örneği
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin-bottom: 10px;
width: 700px;
padding: 5px;
border: 1px solid black;
column-count: 4;
}
.one { column-count: auto; }
.two { column-count: 4; }
.three { column-count: initial; }
.four { column-count: 3; }
.four p{ column-count : inherit; }
</style>
</head>
<body>
<div class="one">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="two">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="three">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.
</div>
<div class="four">
aaLorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime. aa
<p> bb Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. Ipsam,
error aspernatur maiores in enim iste, eos itaque, quae ratione suscipit nostrum nobis fuga maxime.. bb </p>
</div>
</body>
</html> Html çıktısı :
Örnekte ilk olarak div e column-count sayısı verdiğimiz halde daha sonra auto ve initial verdiğimiz varsayılan değer olan 1 değeri atandı. Hangi sayı değerini atarsak o sayı değeri kadar sütun oluşur. Örneğimizde 4 ve 3 değeri atadık ve oluştu. inherit de de div in değeri kadar p etiketinde de sütun sayısı oluştu.
css column-count özelliğinin yaptığı işlemleri ve daha özellikleri css columns ile yapabiliriz.
Başka bir yazımızda görüşmek üzere…
