Çoklu sütun düzeni özelliği, içeriği bir gazetede görebileceğiniz gibi sütunlar halinde yerleştirmek için bir yöntem sağlar. Bu makalede bu özelliğin nasıl kullanılacağı açıklanmaktadır.
| Ön Koşullar: | HTML temelleri (HTML’e Giriş konusunu çalışın) ve CSS’in nasıl çalıştığına dair bir fikir edinin (CSS’e Giriş konusunu çalışın). |
|---|
Basit bir örnek
Genellikle multicol olarak adlandırılan çoklu sütun düzeninin nasıl kullanılacağını inceleyelim. Multicol başlangıç noktası dosyasını indirerek ve CSS’yi uygun yerlere ekleyerek takip edebilirsiniz.
Üç sütunlu yerleşim düzeni
Başlangıç noktası dosyamız çok basit bir HTML içerir: içinde bir başlık ve bazı paragraflar bulunan bir kapsayıcı sınıfına sahip bir sarmalayıcı.
Sınıfı container olan <div> bizim multicol konteynerimiz olacak. İki özellikten birini kullanarak multicol’u etkinleştiririz: column-count veya column-width. column-count özelliği değer olarak bir sayı alır ve o sayıda sütun oluşturur. Aşağıdaki CSS’yi stil sayfanıza ekler ve sayfayı yeniden yüklerseniz, üç sütun elde edersiniz:
.container {
column-count: 3;
}
Oluşturduğunuz sütunlar esnek genişliklere sahiptir – tarayıcı her sütuna ne kadar alan atayacağını hesaplar.
Sütun genişliğini ayarlama
CSS’nizi column-width kullanmak için aşağıdaki gibi değiştirin:
.container {
column-width: 200px;
}
Tarayıcı şimdi size belirttiğiniz boyutta olabildiğince çok sütun verecektir; kalan alan mevcut sütunlar arasında paylaştırılır. Bu, kapsayıcınız bu genişliğe tam olarak bölünemediği sürece tam olarak belirttiğiniz genişliği elde edemeyeceğiniz anlamına gelir.
Sütunları şekillendirme
Multicol tarafından oluşturulan sütunlar ayrı ayrı şekillendirilemez. Bir sütunu diğer sütunlardan daha büyük yapmanın veya tek bir sütunun arka planını ya da metin rengini değiştirmenin bir yolu yoktur. Sütunların görüntülenme şeklini değiştirmek için iki ihtimaliniz var:
- Sütun aralığı kullanılarak sütunlar arasındaki boşluğun boyutunun değiştirilmesi: column-gap
- column-rule ile sütunlar arasına kural ekleme.
Yukarıdaki örneğinizi kullanarak, bir column-gap özelliği ekleyerek boşluğun boyutunu değiştirin. Farklı değerlerle oynayabilirsiniz – özellik herhangi bir uzunluk birimini kabul eder.
Şimdi sütunlar arasına column-rule ile bir kural ekleyin. Önceki bölümlerde karşılaştığınız border özelliğine benzer bir şekilde, column-rule özelliği column-rule-color, column-rule-style ve column-rule-width için bir kısaltmadır ve border ile aynı değerleri kabul eder.
.container {
column-count: 3;
column-gap: 20px;
column-rule: 4px dotted rgb(79, 185, 227);
}
Farklı stil ve renklerde kurallar eklemeyi deneyin.
Dikkat edilmesi gereken bir husus, kuralın kendi genişliğini kaplamamasıdır. Column-gap ile oluşturduğunuz boşluk boyunca uzanır. Kuralın her iki tarafında daha fazla yer açmak için sütun-boşluk boyutunu artırmanız gerekir.
Sütunları yayma
Bir öğenin tüm sütunlara yayılmasını sağlayabilirsiniz. Bu durumda içerik, yayılan öğenin tanıtıldığı yerde kesilir ve ardından öğenin altında devam ederek yeni bir sütun kümesi oluşturur. Bir öğenin tüm sütunlara yayılmasını sağlamak için, column-span özelliği için all değerini belirtin.
Not: Bir öğenin sadece bazı sütunlara yayılmasını sağlamak mümkün değildir. Özellik yalnızca none (varsayılan) veya all değerlerine sahip olabilir.
Sütunlar ve parçalanma
Çok sütunlu bir düzenin içeriği parçalara ayrılabilir. Esasen, bir web sayfasını yazdırdığınızda olduğu gibi, içeriğin sayfalı medyada davrandığı gibi davranır. İçeriğinizi çok sütunlu bir kapsayıcıya dönüştürdüğünüzde, içerik sütunlara bölünür. İçeriğin bunu yapabilmesi için parçalanması gerekir.
Bölünmüş kutular
Bazen bu kırılma, kötü bir okuma deneyimine yol açan yerlerde gerçekleşir. Aşağıdaki örnekte, her birinin içinde bir başlık ve bazı metinler bulunan bir dizi kutuyu düzenlemek için multicol kullandım. Sütunlar ikisi arasında parçalanırsa başlık metinden ayrılır.
<div class="container">
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
vel, viverra egestas ligula.</p>
</div>
</div>
.container {
column-width: 250px;
column-gap: 20px;
}
.card {
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
padding: 10px;
margin: 0 0 1em 0;
}
İçeriye girme ayarı
Bu davranışı kontrol etmek için CSS Fragmentation spesifikasyonundaki özellikleri kullanabiliriz. Bu spesifikasyon bize çok kutuplu ve sayfalı ortamlarda içeriğin kırılmasını kontrol etmek için özellikler verir. Örneğin, break-inside özelliğini avoid değeriyle .card için kurallara ekleyerek. Bu, başlığın ve metnin konteyneridir, bu nedenle parçalanmasını istemiyoruz.
.card {
break-inside: avoid;
page-break-inside: avoid;
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
padding: 10px;
margin: 0 0 1em 0;
}
Bu özelliğin eklenmesi kutuların tek parça halinde kalmasına neden olur; artık sütunlar boyunca parçalanmazlar.
Özet
Artık, oluşturduğunuz tasarımlar için bir düzen yöntemi seçerken kullanabileceğiniz bir başka araç olan çok sütunlu düzenin temel özelliklerini nasıl kullanacağınızı biliyorsunuz.