css column-gap nedir ? Nasıl Kullanılır?

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ı:

css column-gap kullanımı

Başka bir yazımızda görüşmek üzere…

Leave a Reply