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

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.
Eğer css columns konusunu bilmiyorsanız öncelikle o konuyu öğrenmenizi tavsiye ederim.
Başka bir yazımızda görüşmek üzere…