css column-span Nedir? Nasıl Kullanılır?

css column-span özelliği, sütunlara ayırdığımız bir elementin içerisinde bulunan elementin sütunlara ayrılıp ayrılmayacağını belirlemek için kullanırız.

Aldığı değerler :
none : değer yok. ( sütun içerisinde )
all : Tüm sütunlara yayar..
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: 4;
        }
        .one h1 { column-span: none; }
        .two h1 { column-span: all; }
    </style>
</head>

<body>
    <div class="one">
        <h1> This is a Section Title </h1>
        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">
        <h1> This is a Section Title </h1>
        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-span kullanımı

Bu örneğimizde gazetelerde çoklu sütunlara bölünmüş yazıların başlıklarının tek satır halinde nasıl yapıldığını öğrenmiş olduk.

none değeri verdiğimizde sütunların içinde kalırken, all verdiğimizde tek satır halinde bütün sütunların üzerine yayarız.

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

Leave a Reply