css column-gap özelliği, html elementinin çoklu sütunlarda sütunlar arası boşlukların değerini belirlemek için kullanılır.
Aldığı değerler :
normal : Normal değer.
length : Verdiğimiz uzunluk değeri ile aradaki mesafeyi ayarlarız.
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: 400px;
padding: 5px;
border: 1px solid black;
column-count: 2;
}
.one { column-gap: 50px; }
.two { column-gap: normal; }
.three { column-gap: 100px; }
</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>
</body>
</html>Html çıktısı:
Eğer css columns konusunu bilmiyorsanız öncelikle o konuyu öğrenmenizi tavsiye ederim.
Başka bir yazımızda görüşmek üzere…
