Sütun aralığı - CSS Hileleri

Çok sütunlu bir düzende, öğelerin sütunlar boyunca genişlemesini sağlayabilirsiniz column-span.

h2 ( -webkit-column-span: all; column-span: all; )

column-spanÇok sütunlu mizanpajın içindeki bir öğeyi kapsayan bir öğe olarak atayın . Çok sütunlu düzen, sonraki kapsamayan öğeyle devam edecektir.

Değeri column-spankutu olarak mevcut allya da none.

column-span: allSütunlara yayılması için ile bir öğe ayarlayın .

Özelliğin değeri none, bir kapsayan öğe için kill anahtarıdır. Bunu, yayılma öğesine yaymayı durdurmasını söylemek için medya sorgularıyla çalışırken kullanabilirsiniz.

CodePen'de CSS-Tricks (@ css-tricks) tarafından hazırlanan Kalem sütun aralığı örneğine bakın.

Tarayıcı Desteği

Firefox bunu desteklemiyor column-span, ancak ilginç çözümler var.

Genel olarak çok sütunlu düzen için destek şu şekildedir:

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.