Atribut CSS grid-template-areas

Definisi dan penggunaan

Atribut grid-template-areas menentukan area di tata letak grid.

Anda dapat menggunakan grid-area Nama properti grid item, kemudian mengutip nama di atribut grid-template-areas.

Setiap area didefinisikan oleh kutipan. Gunakan titik koma untuk mengutip item grid tanpa nama.

Lihat juga:

Panduan pelajaran CSS:Proyek Grid CSS

Panduan referensi CSS:Atribut grid-area

Panduan referensi CSS:Atribut grid-template

Contoh

Contoh 1

Mengatur proyek "myArea" untuk melintasi dua kolom di layout grid lima kolom:

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

Coba sendiri

Contoh 2

Tentukan dua baris, di mana "item1" melintasi dua kolom pertama di dua baris pertama (pada layout grid lima kolom):

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

Coba sendiri

Contoh 3

Namakan semua item dan buat template halaman web 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 {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Coba sendiri

Syntaks CSS

grid-template-areas: none|itemnames;

Nilai atribut

Nilai Deskripsi
none Nilai standar. Area grid tanpa nama (grid areas).
itemnames Tentukan urutan penampilan setiap kolom dan baris.

Detil teknis

Nilai standar: none
Warisan: Tidak
Produksi animasi: Dukungan. Lihat:Atribut yang berhubungan dengan animasi.
Versi: Modul Layout Grid CSS Level 1
Syntaks JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

Dukungan browser

Angka di tabel menunjukkan versi pertama browser yang mendukung atribut ini penuhnya.

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