Doğuhan ELMA tarafından Layout yayınlanma tarihi
104 görünüm
CSS'te columns özelliği, bir blok öğesinin çoklu sütunlara nasıl bölüneceğini belirtmenizi sağlar. Bu, metin gibi içeriğin gazete tarzında kolayca sütunlara ayrılmasını sağlar, böylece okunabilirliği artırır ve düzeni iyileştirir. columns özelliği iki ana parametre alabilir: sütun sayısı ve sütun genişliği. Bu özellik, CSS3 ile tanıtılmıştır ve modern web tasarımında yaygın olarak kullanılmaktadır.
Kullanımı
columns özelliği şu şekilde kullanılabilir:
.element { columns: 100px 3; }
Bu örnekte, .element sınıfına sahip bir öğe için sütun genişliği en az 100 piksel olacak şekilde ve toplam 3 sütun olacak şekilde ayarlanmıştır. CSS, belirtilen genişliği ve sütun sayısını mümkün olan en iyi şekilde yerleştirmeye çalışır. Eğer belirtilen sütun sayısı için yeterli alan yoksa, tarayıcı otomatik olarak sütun sayısını azaltabilir.
Parametreler
Sütun Sayısı: İçeriğin kaç sütuna bölüneceğini belirtir. Bu değer bir sayı veya auto olabilir. auto belirtildiğinde, tarayıcı sütun genişliğine bağlı olarak otomatik olarak sütun sayısını belirler.
Sütun Genişliği: Her sütunun ideal genişliğini belirtir. Bu değer bir uzunluk (örneğin, piksel veya em) veya auto olabilir.
Diğer İlgili Özellikler
column-gap: Sütunlar arasındaki boşluğu belirler.
column-rule: Sütunlar arasına dikey çizgi eklemek için kullanılır. Bu çizginin stilini, kalınlığını ve rengini belirlemek için column-rule-style, column-rule-width ve column-rule-color özellikleri kullanılabilir.
column-span: Bir öğenin birden fazla sütunu kaplamasını sağlar. Genellikle başlıklar veya önemli bloklar için kullanılır.
columns özelliği, yanıt veren web tasarımında metin ve diğer içerikleri düzenlemek için güçlü bir araçtır ve kullanıcı deneyimini artırmada önemli bir rol oynar.
TailwindCSS:
|
Class
|
Properties
|
|---|---|
| columns-1 | columns: 1; |
| columns-2 | columns: 2; |
| columns-3 | columns: 3; |
| columns-4 | columns: 4; |
| columns-5 | columns: 5; |
| columns-6 | columns: 6; |
| columns-7 | columns: 7; |
| columns-8 | columns: 8; |
| columns-9 | columns: 9; |
| columns-10 | columns: 10; |
| columns-11 | columns: 11; |
| columns-12 | columns: 12; |
| columns-auto | columns: auto; |
| columns-3xs | columns: 16rem; /* 256px */ |
| columns-2xs | columns: 18rem; /* 288px */ |
| columns-xs | columns: 20rem; /* 320px */ |
| columns-sm | columns: 24rem; /* 384px */ |
| columns-md | columns: 28rem; /* 448px */ |
| columns-lg | columns: 32rem; /* 512px */ |
| columns-xl | columns: 36rem; /* 576px */ |
| columns-2xl | columns: 42rem; /* 672px */ |
| columns-3xl | columns: 48rem; /* 768px */ |
| columns-4xl | columns: 56rem; /* 896px */ |
| columns-5xl | columns: 64rem; /* 1024px */ |
| columns-6xl | columns: 72rem; /* 1152px */ |
| columns-7xl | columns: 80rem; /* 1280px */ |
0 Yorum
Önerilen Yorumlar
Görüntülenecek yorum yok.