CSS ızgara-sütun özelliği

Tanım ve kullanım

grid-column özelliği, ağırlandırma projelerinin boyutunu ve ağırlandırma düzenindeki konumunu belirler; bu, aşağıdaki özelliklerin kısaltma özelliğidir:

Daha fazla bakınız:

CSS Eğitimi:CSS Ağırlandırma

Örnek

Örnek 1

"item1" öğesini sütun 1'den başlatıp iki sütun boyunca geçecek şekilde ayarlar:

.item1 {
  grid-column: 1 / span 2;
}

Kişisel olarak deneyin

Örnek 2

Sütun geçmek için sütun çizgisi değerlerini kullanabilirsiniz:

.item1 {
  grid-column: 1 / 3;
}

Kişisel olarak deneyin

CSS dilbilgisi

grid-column: grid-column-start / grid-column-end;

Özellik değeri

Değer Tanım
grid-column-start Projeyi göstermeye başlayacak sütunu belirtir.
grid-column-end Nerede durdurulacağını belirler, projeyi göstermek için hangi sütunları geçer veya ne kadar sütun geçer.

Teknik ayrıntılar

Öntanımlı değer: auto / auto
Kalıtım: Hayır
Animasyon yapımı: Desteklenmektedir. Ayrıca bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS Grid Layout Modülü 1
JavaScript dilbilgisi: object.style.gridColumn="2 / span 2"

Tarayıcı desteği

Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44