CSS grid-template özelliği

Tanım ve Kullanım

grid-template özelliği aşağıdaki özelliklerin kısaltmasıdır:

Ayrıca bakınız:

CSS Eğitimleri:CSS ağ öğesi

CSS Referans Kılavuzu:grid-area özelliği

CSS Referans Kılavuzu:grid-template-rows özelliği

CSS Referans Kılavuzu:grid-template-columns özelliği

CSS Referans Kılavuzu:grid-template-areas özelliği

Örnek

Örnek 1

İlk sütunu 150 piksel yüksek üç sütunlu grid düzeni oluşturma:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Kişisel olarak deneyin

Örnek 2

İki satır belirtin, "item1" iki satırın ilk iki sütununda (beş sütunlu bir ağ düzeninde) genişleyecek şekilde:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea ...'
    'myArea myArea ...';
}

Kişisel olarak deneyin

Örnek 3

Tüm projeleri adlandırın ve hazır bir web şablonu oluşturun:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Kişisel olarak deneyin

CSS dilbilgisi

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Özellik değeri
Değer Açıklama
none Varsayılan değer. Sütun veya satır boyutlarını belirtmez.
grid-template-rows / grid-template-columns Sütun ve satır boyutlarını belirtir.
grid-template-areas Adlandırılmış projelerin kullanıldığı ağ düzenini belirtir.
initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği, ebeveyn elementinden devralır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: none none none
Devralma: Hayır
Animasyon yapımı: Desteği var. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS Grid Layout Modülü 1
JavaScript dilbilgisi: object.style.gridTemplate="250px / auto auto"

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