Atribut grid-area CSS

Definisi dan penggunaan

ukuran item grid atribut grid-area dan posisinya dalam tata letak grid, adalah singkatan dari atribut berikut ini:

Atribut grid-area dapat digunakan untuk menamakan item grid. kemudian, melalui kontainer grid, grid-template-areas Referensi atribut yang dinamai item grid. Lihat contoh di bawah ini.

Lihat pula:

Tutorial CSS:Tata letak Grid CSS

Contoh

Contoh 1

Membuat "item1" dimulai di baris 2 kolom 1 dan melintasi 2 baris 3 kolom:

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

Coba sendiri

Petunjuk:Lebih banyak contoh tersedia di bagian bawah halaman.

Sintaks CSS

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

Nilai atribut

Nilai Deskripsi
grid-row-start Tentukan dari baris mana item akan ditampilkan.
grid-column-start Tentukan dari kolom mana item akan ditampilkan.
grid-row-end Tentukan di mana item berhenti ditampilkan di garis baris, atau melintasi berapa baris.
grid-column-end Tentukan di mana item berhenti ditampilkan di garis kolom, atau melintasi berapa kolom.
itemname Tentukan item proyek tata letak grid.

Detil teknis

Nilai Default: auto / auto / auto / auto
Inherit: Tidak
Pembuatan animasi: Dukungan. Lihat:Properti animasi。
Versi: Modul Tata Letak Grid CSS Level 1
Grammar JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Beberapa contoh lain

Contoh 2

Item1 dinamai 'myArea' dan melintasi semua lima kolom di tata letak grid lima kolom:

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

Coba sendiri

Contoh 3

Buat 'myArea' melintasi dua kolom di tata letak grid lima kolom (titik merah menunjukkan item tanpa nama):

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

Coba sendiri

Contoh 4

Buat 'item1' melintasi dua kolom dan dua baris:

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

Coba sendiri

Contoh 5

Namailkan semua item dan buat template halaman yang siap digunakan:

.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';
}

Coba sendiri

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung sifat ini penuh.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44