Yükleniyor...

CSS Çoklu Sütun

Optional Advanced az önce görsel sprite’ları işledi — bir sheet, birçok kare. Bu oturum başka bir isteğe bağlı araç: çoklu sütun. Araç çubuğu değil, gazete düşünün. CSS’ten uzun bir yazıyı iki veya üç dikey akışa dökmesini istersiniz. Grid üzerine bağımsız kart yerleştirmezsiniz.

Doğrudan yanıt

CSS çoklu sütun yerleşimi akan bir içerik bloğunu — genelde uzun metin — gazete sütunlarına böler. Sayıyı (column-count), rahat bir sütun genişliğini (column-width), oluğu (column-gap) ve isteğe bağlı dikey çizgiyi (column-rule) verirsiniz. Metin, listeler ve satır içi içerik önce ilk sütunu, sonra sonrakini doldurur. Uzun metin için. Navigasyon, kart destesi ve sayfa iskeleti için Flexbox veya Grid’de kalın ki her kutu bütün bir birim kalsın.

Sütunlar neden var

Uzun satırlar zor okunur. Dergiler bunu bir sayfada birkaç daha kısa sütunla çözdü. CSS aynı fikri web’e aldı: bir öğe, bir metin akışı, otomatik sütunlara sarılma. Bu Flexbox değil (öğelerin satırı/sütunu) ve Grid değil (iki boyutlu alan haritası). Çoklu sütun bir parçalama aracıdır — durdurmazsanız tarayıcı paragrafı sütun sınırında kesebilir.

Sayı: «üç sütun istiyorum»

column-count bir sayı ister. Tarayıcı kabın genişliğini o kadar sütuna böler (boşluklar düşülerek):

Newspaper article with column-count

css 
.article {
column-count: 3;
max-width: 60rem;
}

Geniş bir yazıda üç akış görürsünüz. Dar telefonda üç ince sütun okunmaz — media query ile eşleyin veya yer daralınca sayının düşmesi için column-width tercih edin.

Genişlik: «her sütun kabaca bu kadar»

column-width bir ipucu, kilitli piksel kafesi değil. Tarayıcı en az o genişlikte sığabildiği kadar sütun üretir:

Flexible columns with column-width

css 
.article {
column-width: 16rem;
max-width: 60rem;
}

Kutu ~48rem artı boşluksa üç sütun görebilirsiniz; küçülürse iki, sonra bir. Her görünümde sabit column-count: 3’ten genelde daha sakin. İkisini de koyabilirsiniz: sayı tavan, genişlik rahat taban. columns kısaltması önce genişlik sonra sayı, örneğin columns: 16rem 3.

Boşluk ve çizgi

Sütunlar nefes ister. column-gap oluktur. column-rule oraya ince bir çizgi çizer (kalınlık, stil, renk — border gibi ama kutu kenarı kadar ekstra yer kaplamaz):

Gap and rule between columns

css 
.article {
column-width: 16rem;
column-gap: 2rem;
column-rule: 1px solid #cbd5e1;
}

Parça kısaltmalar var (column-rule-width, column-rule-style, column-rule-color). Çizgiyi sakin tutun; gazete ayırıcısı, ikinci bir tasarım sistemi değil.

Tüm sütunlara yayılan başlık

Başlık çoğu zaman tam genişlikte oturmalı, sütunlar altından başlamalı. Çocukta column-span: all bunu yapar:

Heading that spans all columns

css 
.article h2 {
column-span: all;
margin: 0 0 1rem;
}

.article {
column-count: 2;
column-gap: 1.5rem;
}

Günlük kullanımda none ve all. Span başlık, öne çıkan görsel veya vurgu kutusu içindir — her paragraf için değil.

Kutular yarılmasın

Kart, altyazılı figure veya alıntı sütun kırılması ortadan keserse bozuk görünür. break-inside: avoid tarayıcıdan mümkünse o kutuyu tek sütunda tutmasını ister:

Keep a card from splitting across columns

css 
.article figure,
.article .callout {
break-inside: avoid;
margin: 0 0 1rem;
}

Baskı benzeri akışlarda break-before / break-after da; eski tarayıcılarda page-break-inside: avoid. Her savaşı kazanmazsınız — çok yüksek kutular yine taşar — ama hedef genelde altyazının görselle kalmasıdır. column-fill: balance (çoğu zaman varsayılan) yükseklikleri dengelemeğe çalışır; auto önce ilk sütunu doldurur (gazete atlamasına daha yakın).

Sütun vs Flex vs Grid

📊 Multi-column vs Flex vs Grid

Tool Job Poor fit
Multi-column (column-*) Long article, glossary, name list that should read like a newspaper Card galleries, nav bars, full page shells
Flexbox One-dimensional rows/columns of whole items (toolbar, chips, simple stacks) Pouring a novel into three text streams
Grid Two-dimensional page or component map (header / main / aside) Replacing column-count on a <p> soup
Sprites (background-position) Decorative icon tiles on a sheet Laying out article text

Flexbox ve Grid modülleri öğe yerleştirmeyi öğretti. Çoklu sütun justify-content veya adlı alan vermez. Tek akış döker. Her çocuk tıklanabilir dikdörtgen kalmalıysa Flex veya Grid kullanın.

Sayfa iskeleti Flex veya Grid kalsın

Tüm siteyi column-count: 3 yapmayın. Başlık, nav ve kart destesi bütün kutu ister:

Page chrome stays Flex or Grid

css 
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.card-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}

.prose {
column-width: 18rem;
column-gap: 1.75rem;
}

.prose çok sütunlu olabilir. .card-deck olmamalı. Aynı öğede ikisini karıştırmak görselleri keser, düğmeleri yanlış akışa düşürür.

Dar ekranlar ve okuma sırası

Sütunlar rahat bir satırdan ince olacaksa (kabaca 12–16rem metin) tek sütuna inin. Ekran okuyucu ve klavye belge sırasını izler, görsel tarama gibi «bir sütun aşağı sonra sonraki» değil — makale için uygun; ilgisiz widget panosunu sütunla taklit ederseniz tuhaf. RTL dillerde sütunlar writing mode’a göre dolar; çizgi yine olukta kalır.

Kendiniz deneyin

  1. Birkaç paragrafı .prose içine alın, column-count: 2 ve column-gap.
  2. column-width: 16rem’e geçin, pencereyi çekin — sayının değişmesini izleyin.
  3. Sakin gri column-rule: 1px solid ekleyin.
  4. column-span: all’lı bir <h2> koyun.
  5. Bir figure’u break-inside: avoid ile sarın. Sonra aynı CSS’i kart ızgarasında deneyin — orada Flex/Grid neden daha sakin, görün.

Sık hatalar

  • Çoklu sütunu kart galerisi veya tüm sayfa yerleşimi sanmak
  • Telefonda column-count: 3 zorlamak, satırda üç sözcük kalana dek
  • column-gap unutup akışları yapıştırmak
  • Görsel ve altyazının sütun sınırında yarılması
  • Sütunlara Flex muamelesi: akış için flex-grow yok
  • Sprite ile karıştırmak — sprite arka planı kırpar; sütunlar metni böler

Özet

  • Çoklu sütun tek akan akışı gazete sütunlarına döker
  • column-count sayı; column-width rahat taban; ikisi birleştirilebilir
  • column-gap ve column-rule oluğu süsler; başlıklar column-span: all
  • break-inside: avoid mümkünse figure ve vurgu kutusunu bütün tutar
  • Sayfa iskeleti ve kart desteleri hâlâ Flex ve Grid’in
  • Optional Advanced sonraki konu: maskeleme (masking)

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 73 / 75
Css Ders