css column-width, Html elementi sütunlarının genişliğini belirlemek için kullanırız.
Aldığı değerler :
auto : Otomatik değer alır. ( varsayılan 1 değeri atanır )
length : Verdiğimiz değer sütunun minimum genişliğini belirler.
inherit : Bir üst elementten miras alır.
initial : Varsılan değere döner ( varsayılan değer : 1 )
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin-bottom: 10px;
width: 600px;
padding: 5px;
border: 1px solid black;
column-width: 150px;
}
.one { column-width: auto; }
.two { column-width: 100px; }
.three { column-width: initial; }
.four { column-width: 150px; }
.four p{ column-width : 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-width genişlik değeri verdiğimiz halde daha sonra auto ve initial verdiğimizde varsayılan değer olan bütün genişlik atamış olduk.
Hangi genişlik değerini atarsak o değer kadar minimum sütun genişliği oluşur. 100px verdiğimizde 6 sütun oluşmasını bekleyebilirsiniz ama padding değerlerinden dolayı tam sığmayacağından 100px den biraz daha değer atayarak 5 sütun oluşturur.
inherit değerinde aynı durumdadır. Verdiğimiz değeri minimum olacak şekilde atana yapar uygun değilse değeri artırır.
css column-width özelliğinin yaptığı işlemleri ve daha özellikleri css columns ile yapabiliriz.
Başka bir yazımızda görüşmek üzere…
