CSS ızgara alanı Özellik
Örnek
"item1"in 2. satır 1. sütundan başlamasını ve 2 satır ve 3 sütuna yayılmasını sağlayın:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik grid-area
, bir ızgara öğesinin boyutunu ve konumunu bir ızgara düzeninde belirtir ve aşağıdaki özellikler için bir kestirme özelliktir:
Özellik grid-area
, bir ızgara öğesine bir ad atamak için de kullanılabilir. Adlandırılmış ızgara öğelerine daha sonra
ızgara kabının ızgara şablon alanları özelliği ile başvurulabilir. Aşağıdaki örneklere bakın.
Varsayılan değer: | araba / araba / araba / araba |
---|---|
Miras: | Hayır |
canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS Izgara Düzen Modülü Seviye 1 |
JavaScript sözdizimi: | nesne .style.gridArea="1 / 2 / yayılma alanı 2 / yayılma alanı 3" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
CSS Sözdizimi
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Mülk değerleri
Value | Description |
---|---|
grid-row-start | Specifies on which row to start displaying the item. |
grid-column-start | Specifies on which column to start displaying the item. |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
itemname | Specifies a name for the grid item |
Daha fazla örnek
Örnek
Öğe1 "myArea" adını alır ve beş sütunun tamamını beş sütunlu bir ızgara düzeninde kapsar:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Örnek
"myArea"nın beş sütunlu bir ızgara düzeninde iki sütuna yayılmasına izin verin (nokta işaretleri adsız öğeleri temsil eder):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Örnek
"item1" in iki sütuna ve iki satıra yayılmasını sağlayın:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Örnek
Tüm öğeleri adlandırın ve kullanıma hazır bir web sayfası şablonu yapın:
.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';
}
İlgili Sayfalar
CSS eğitimi: CSS Izgara Düzeni