CSS ağızlık-alanı özelliği

Tanım ve Kullanım

grid-area özelliği, ağırlandırma öğelerinin boyutlarını ve ağırlandırma düzenindeki konumlarını belirler; bu, aşağıdaki özelliklerin kısaltma özelliğidir:

grid-area özelliği, ağırlandırma öğelerine adlar atamak için de kullanılabilir. Daha sonra, ağırlandırma konteynerinin grid-template-areas Özellik referanslı ağırlandırma öğeleri. Aşağıdaki örneklere bakın.

Ayrıca bakınız:

CSS Eğitimi:CSS Ağırlandırma Düzeni

Örnek

Örnek 1

"item1" adlı öğeyi satır 2 sütun 1'den başlatın ve iki satır üç sütun boyunca geçin:

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

Kişisel olarak deneyin

İpucu:Daha fazla örnek için sayfa altına bakın.

CSS Dilbilgisi

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Özellik değeri

Değer Açıklama
grid-row-start Projeyi göstermeye başlayacak satırı belirtir.
grid-column-start Projeyi göstermeye başlayacak sütunu belirtir.
grid-row-end Projenin hangi satır çizgisinde durdurulacağını veya kaç satır geçeceğini belirtin.
grid-column-end Projenin hangi sütun çizgisinde durdurulacağını veya kaç sütun geçeceğini belirtin.
itemname Ağaç项目的项目。

Teknik ayrıntılar

Varsayılan değer: auto / auto / auto / auto
Geçiş: Hayır
Animasyon yapımı: Destekleniyor. Ayrıca bakınız:Animasyonla ilgili özellikler。
Sürüm: CSS Grid Layout Module Level 1
JavaScript dilbilgisi: object.style.gridArea="1 / 2 / span 2 / span 3"

Daha fazla örnek

Örnek 2

Item1 "myArea" olarak adlandırılmıştır ve beş sütunlu bir grid düzeninde tüm beş sütunu geçmektedir:

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

Kişisel olarak deneyin

Örnek 3

"myArea"ni beş sütunlu bir grid düzeninde iki sütun boyunca geçmesini sağlayın (nokta, adlandırılmamış projeleri temsil eder):

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

Kişisel olarak deneyin

Örnek 4

"item1"ni iki sütun ve iki satır boyunca geçmesini sağlayın:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Kişisel olarak deneyin

Örnek 5

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 {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Kişisel olarak deneyin

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