CSS grid-template-areas özelliği

Tanım ve Kullanım

grid-template-areas özelliği, ağ düzeninde alanları belirler.

Kullanabilirsiniz grid-area Özellik adlandırma ağ projesi, ardından grid-template-areas özelliğinde bu adı referans alın.

Her alan tire ile tanımlanmıştır. Adlandırılmamış ağaç projelerini nokta ile alıntılayın.

Ayrıca bakınız:

CSS eğitimi:CSS 网格项目

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

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

Örnek

Örnek 1

Adlandırılmış proje "myArea" beş sütunlu bir ağaç düzeninde iki sütunu kapsasın:

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

Kişisel olarak deneyin

Örnek 2

İki satır belirtin, "item1" iki üst satırda iki sütunu kapsasın (beş sütunlu bir ağaç düzeninde):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    '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-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Kişisel olarak deneyin

CSS dilbilgisi

grid-template-areas: none|itemnames;

Özellik değeri

Değer Açıklama
none Varsayılan değer. Adlandırılmamış ağaç alanları (grid alanları).
itemnames Her sütun ve her satırın nasıl görüntülenmesi gerektiğini belirleyen bir sıra.

Teknik ayrıntılar

Varsayılan değer: none
Devralma: Hayır
Animasyon yapımı: Destekleniyor. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS Grid Layout Modülü 1
JavaScript dilbilgisi: object.style.gridTemplateAreas=". . . myArea myArea"

Tarayıcı desteği

Tablo içindeki 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