css columns özelliği, html elementinin çok sütunlu özelliklerini belirlemek için kullanılır. Maksimum sütun sayısı ile minimum genişlik özelliklerini belirleriz.
Aldığı değerler :
auto : Otomatik değer alır. ( varsayılan 1 değeri atanır )
column-width : Minimum sütun genişlik değeri.
column-count : Maksimum sütun sayısı değeri.
initial : Varsılan değere döner ( varsayılan değer : 1 )
Kullanım şekli :
columns : column-width column-count; (100px 3)
columns : column-width; ( 200px )
columns : column-count; ( 3 )Tek parametre ile de kullanabiliriz çift parametre ile de kullanabiliriz.
column-width değeri verirken genelde pixel değeri verilir. column-count ta ise sadece sayı değeri veririz.
Not : Css kodları bazı tarayıcılarda hata vermemesi içi prefix kullanırız. Bu yazımızda ilk div e columns özelliği kullanırken örnek olması için kullanacağız. Burada örnek vermek için kullandığımız için yazıların uzamaması diğer örneklerde kullanmayacağız. Ama gerçek projelerde kullanmamız gereklidir çünkü kullanıcıların hangi tarayıcıyı kullanacağını bilemeyiz. Bundan dolayı yaptığımız siteler her tarayıcıya uyumlu olmalıdır.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
margin-bottom: 10px;
width: 600px;
padding: 5px;
border: 1px solid black;
-webkit-columns: 200px 3;
-moz-columns: 200px 3;
-o-columns: 200px 3;
-ms-columns: 200px 3;
columns: 200px 3;
}
.one { columns: auto; }
.two { columns: 100px; }
.three { columns: 3; }
.four { columns: initial; }
.five { columns:2 100px ; }
.five p{ columns : 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">
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="five">
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>
css columns özelliğinin yaptığı işlemleri column-count ve column-width i birlikte kullanarak yapabiliriz. Sonuç olarak aynı olur ama kısa kod yazmanın öneminden dolayı columns özelliğini kullanmak daha güzel olur.
Başka bir yazımızda görüşmek üzere…
