Properti area grid CSS
Contoh
Buat "item1" mulai dari baris 2 kolom 1, dan rentangkan 2 baris dan 3 kolom:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti grid-area
menentukan ukuran dan lokasi item kisi dalam tata letak kisi, dan merupakan properti singkatan untuk properti berikut:
Properti grid-area
juga dapat digunakan untuk menetapkan nama ke item kisi. Item grid bernama kemudian dapat direferensikan oleh properti
grid-template-areas dari wadah grid. Lihat contoh di bawah.
Nilai bawaan: | mobil / mobil / mobil / mobil |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | Modul Tata Letak Grid CSS Level 1 |
Sintaks JavaScript: | objek .style.gridArea="1 / 2 / rentang 2 / rentang 3" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
grid-area | 57 | 16 | 52 | 10 | 44 |
Sintaks CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Nilai properti
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 |
Lebih Banyak Contoh
Contoh
Item1 mendapatkan nama "myArea", dan mencakup semua lima kolom dalam tata letak kotak lima kolom:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Contoh
Biarkan "myArea" menjangkau dua kolom dalam tata letak kotak lima kolom (tanda titik mewakili item tanpa nama):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Contoh
Buat "item1" menjangkau dua kolom dan dua baris:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
Contoh
Beri nama semua item, dan buat templat halaman web siap pakai:
.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';
}
Halaman Terkait
Tutorial CSS: Tata Letak Kotak CSS