Sütunlar hem genişlik hemde sayısını ayarlamak için kestirme bir özelliktir.
.column {
-webkit-columns: 200px 5; /* Chrome, Safari, Opera */
-moz-columns: 200px 5; /* Firefox */
columns: 200px 5
}
| Değer | Açıklama |
| auto | Sütunların hem genişliği hem de sayısı otomatik ayarlanır. |
| Column-width | Sütun genişliği belirtir. |
| Column-count | Sütun sayısı belirtir. |
| İnital | |
| İnherit |
| 4.0-webkit | 9s.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Sütunlar için en uygun genişliği belirtir.
.column {
-webkit-column-width: 200px; /* Chrome, Safari, Opera */
-moz-column-width: 200px; /* Firefox */
column-width: 200px;
}
| Değer | Açıklama |
| auto | Sütunlar için genişlik tarayıcı tarafından belirlenir. |
| length | Sütunların alacağı genişliği belirtilen genişlik değeridir. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Bir elementin sütun içinde yayılıp yayılmayacağını belirmek için kullanılır.
.column {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.column h3 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
| Değer | Açıklama |
| 1 | Sütunlar arasında kalarak 1 sütunluk yer kaplar. |
| all | Sütunlar boyunca uzanarak bütün satırı kaplar. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Sütunlar arasındaki kesmenin genişliğini ayarlar.
.column {
/* Chrome, Safari, Opera */
-webkit-column-count: 5;
-webkit-column-gap: 60px;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 3px;
/* Firefox */
-moz-column-count: 5;
-moz-column-gap: 60px;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 3px;
column-count: 5;
column-gap: 60px;
column-rule-style: dotted;
column-rule-width: 3px;
}
| Değer | Açıklama |
| medium | Sütunlar arasındaki kesmenin genişliğini orta olarak ayarlanır. |
| thin | Sütunlar arasındaki kesmenin genişliğini ince olarak ayarlanır. |
| thick | Sütunlar arasındaki kesmenin genişliğini kalın olarak ayarlanır. |
| length | Sütunlar arasındaki kesmenin genişliğini istenilen boyutta ayarlanır. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Stunlar arasındaki kesmenin stilini ayarlar.
.column {
/* Chrome, Safari, Opera */
-webkit-column-count: 5;
-webkit-column-gap: 60px;
-webkit-column-rule-style: dashed;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 60px;
-moz-column-rule-style: dashed;
column-count: 5;
column-gap: 60px;
column-rule-style: dashed;
}
| Değer | Açıklama |
| none | sütun çizgisini kaldırır. |
| hidden | sütun çizgisini gizler. |
| dotted | Noktalı bir sütun çizgisi çizer. |
| dashed | Kesik bir sütun çizgisi çizer. |
| solid | Düz bir sütun çizgisi çizer. |
| double | ikili bir sütun çizgisi çizer. |
| groove | 3D grooved(Yivli) sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| ridge | 3D ridge(Çıkıntılı) sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| inset | 3D inset sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| outset | 3D outset sütun çizgisini çizer. Efekt renge göre değişkenlik gösterir. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Sütunlar arasındaki kesmenin rengini ayarlar.
.column{
-webkit-column-count: 3;
-webkit-column-gap: 30px;
-webkit-column-rule-style: outset;
-webkit-column-rule-color: blue;
/* Firefox */
-moz-column-count: 3;
-moz-column-gap: 30px;
-moz-column-rule-style: outset;
-moz-column-rule-color: blue;
column-count: 3;
column-gap: 30px;
column-rule-style: outset;
column-rule-color: blue;
}
| Değer | Açıklama |
| color | Sütunlar arasındaki kesmenin rengini belirlemek için kullanılır |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Sütunlar arasındaki kesmenin stilini ve rengini ayarlar.
.column{
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
-webkit-column-rule: 5px solid red; /* Chrome, Safari, Opera */
-moz-column-rule: 5px solid red; /* Firefox */
column-rule: 5px solid red;
}
| Değer | Açıklama |
| column-rule width | Sütunlar arasındaki kural genişliğini ayarlar. Varsayılan değer: medium; |
| column-rule style | Sütunlar arasındaki kural stilini ayarlar. Varsayılan değer: none; |
| column-rule-color | Sütunlar arasındaki kural rengini ayarlar. Varsayılan değer: elemanın rengi; |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 15.0-webkit |
Sütunlar arasındaki boşluğu belirler.
.column {
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
-webkit-column-gap: 60px; /* Chrome, Safari, Opera */
-moz-column-gap: 60px; /* Firefox */
column-gap: 60px;
}
| Değer | Açıklama |
| length | Sütunlar arasındaki boşluk belirtilen uzunluk değerini alır. |
| normal | Sütunlar arasına normal bir boşluk değeri belirler. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |
Bölünmüş elementin sütun sayısını belirler.
.column{
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
-webkit-column-fill: balance; /* Chrome, Safari, Opera */
-moz-column-fill: balance; /* Firefox */
column-fill: balance;
}
| Değer | Açıklama |
| balance | Sütunlar dengelidir. |
| number | Sutunlar ardı ardına dolu olan kısım kadar farklı uzunluklara sahip olacaklardır. |
| İnital | |
| İnherit |
| Desteklenmiyor | 13.0-moz | Desteklenmiyor | Desteklenmiyor | Desteklenmiyor |
Bölünmüş elementin sütun sayısını belirler.
.column{
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
| Değer | Açıklama |
| number | Elementin içeriğe uygun sütun satısı belirlenir. |
| auto | Elementin sütun sayısı otomatik belirlenecektir. |
| İnital | |
| İnherit |
| 4.0-webkit | 2.0-moz | 10.0 | 3.1-webkit | 11.1 15.0-webkit |