css column-fill özelliği, Html elementi sütunlarının nasıl doldurulacağını belirlemek için kullanılır.
Aldığı değerler :
auto : Otomatik değer alır.
balace : Bütün sütunları dengeler.
inherit : Bir üst elementten miras alır.
initial : Varsılan değere döner.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin-bottom: 10px;
width: 600px;
height: 100px;
padding: 5px;
border: 1px solid black;
column-count: 4;
column-fill: balance;
}
.one { column-fill: auto; }
.two { column-fill: balance; }
.three { column-fill: initial; }
.four { column-fill: auto; }
.four p{ column-fill : 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.
</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.
</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.
</div>
<div class="four">
aaLorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. aa
<p> bb Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit odit natus repudiandae sapiente culpa. bb </p>
</div>
</body>
</html>Html çıktısı:
Örnek görüldüğü gibi auto değeri verdiğimizde sütun yüksekliği kadar doldurmadan yeni sütuna geçmiyor. balance değerinde ise tüm metni bütün sütunlara dengeli bir şekilde dağıtıyor. initial (varsayılan değer) değeri balance değeridir.
Başka bir yazımızda görüşmek üzere…
