Gap çoklu sütun

column-count ve column-gap ile çoklu sütun düzenini öğrenirsin.

Çoklu sütun nedir?

Gazete ve dergilerdeki gibi, uzun bir metni sütunlara bölmek için column-count özelliğini kullanırsın. column-count: 3 yazdığında metin otomatik olarak üç sütuna ayrılır; tarayıcı sütun yüksekliklerini dengeler.

Sütunlar arasındaki boşluğu column-gap ile ayarlarsın. column-gap: 2rem sütunlara nefes aldırır. Daha ince denetim için column-width de verebilirsin.

column-rule ile ayraç çiz

Sütunların arasına bir ayraç çizgi eklemek için column-rule özelliğini kullanırsın. Bu, border'a benzer; kalınlık, biçim ve renk tek satırda verilir.

Örneğin column-rule: 1px solid #ccc; sütunlar arasına ince gri bir çizgi çizer. Çizgi, sütunlar arası boşluğun tam ortasında durur; metinle çakışmaz.

Uygulama Makaleyi üç sütuna böl

.article seçicisine üç bildirim ver: column-count: 3, column-gap: 2rem ve column-rule: 1px solid #ccc. Böylece makale üç sütuna bölünür ve sütunlar arasına ince gri çizgi çizilir.

Örnek çözümü göster

/* makaleyi üç sütuna böl */
.article {
  column-count: 3;
  column-gap: 2rem;
  column-rule: 1px solid #ccc;
}

Kendini test et

Hangisi metni sabit üç sütuna böler?
- column-count: 3
- column-width: 3
- columns: 3px
- display: column-3
Cevabı göster

column-count: 3 — Doğru. column-count: 3 metni üç sütuna böler.

column-count özelliğini yaz

.article {
  ____: 2;
  column-gap: 2rem;
}

Cevabı göster

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

Çoklu sütun özelliklerini eşle

column-count

Sütun sayısı
column-gap

Sütun aralığı
column-rule

Ara çizgi
column-width

Sütun genişliği

Sıradaki ders: Özet - Modern kart ızgarası

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler