CSS grid-template-columns özelliği

tanım ve kullanım

grid-template-columns özelliği, ağaç düzenindeki sütun sayısını (ve genişliğini) belirtir.

bu değerler, boşluklarla ayrılmış bir liste olup, her bir değeri ilgili sütunun boyutunu belirtir.

daha fazla bilgi için:

CSS eğitim:CSS ağaç düzeni

CSS referans el kitabı:grid-template-rows özelliği

CSS referans el kitabı:grid-template özelliği

örnek

örnek 1

dört sütunlu bir ağaç konteyneri yapın:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

kendiniz deneyin

örnek 2

dört sütunlu bir ağaç düzeni yapın ve her sütunun boyutunu belirtin:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

kendiniz deneyin

CSS dilbilgisi

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

özellik değeri

değer tanım
none varsayılan değer. Gerekli olduğunda sütunlar oluşturulur.
auto sütunların boyutu, konteynerin boyutuna ve sütundaki öğe içeriğinin boyutuna bağlıdır.
max-content sütunların boyutları, sütundaki en büyük öğeye göre belirlenir.
min-content sütunların boyutları, sütundaki en küçük öğeye göre belirlenir.
length sütunların boyutlarını ayarlamak için geçerli uzunluk değerlerini kullanarak sütunları boyutlandırın. İlgili:uzunluk birimi.
initial bu özelliği varsayılan değerine ayarlar. İlgili: initial.
inherit bu özelliği ebeveyn elementinden miras alır. İlgili: inherit.

teknik ayrıntılar

varsayılan değer: none
miras: hayır
animasyon yapımı: destekleniyor. İlgili:animasyonla ilgili özellikler.
sürüm: CSS Grid Layout Modülü 1
JavaScript dilbilgisi: object.style.gridTemplateColumns="50px 50px 50px"

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