属性 CSS grid-template-areas

Definisi dan penggunaan

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

Anda boleh gunakan grid-area Mengambil nama grid item, lalu rujuk ke nama tersebut di atribut grid-template-areas.

Setiap kawasan ditakrifkan oleh petik. Gunakan titik untuk merujuk kepada item rangkaian tanpa nama.

Lihat juga:

Panduan Tutorial CSS:Proyek Grid CSS

Panduan Referensi CSS:Atribut grid-area

Panduan Referensi CSS:Atribut grid-template

Contoh

Contoh 1

Untuk membenarkan proyek "myArea" untuk melintasi dua lajur di susunaturi lima lajur:

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

Coba sendiri

Contoh 2

Menentukan dua baris, di mana "item1" melintasi dua lajur pertama di dua baris pertama (di susunaturi lima lajur):

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

Coba sendiri

Contoh 3

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

Coba sendiri

Syarat Bahasa CSS

grid-template-areas: none|itemnames;

Nilai atribut

Nilai Penerangan
none Nilai lalai. Area rangkaian tanpa nama (grid areas).
itemnames Menentukan urutan yang seharusnya di paparkan setiap baris dan setiap lajur.

Detil teknikal

Nilai lalai: none
Mewarisi: Tidak
Pembuatan animasi: Didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: Modul Susunaturi Grid CSS Level 1
Syarat Bahasa JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

Pendukung perebutan

Bilangan di dalam tabel menunjukkan versi perebutan penuh untuk sifat ini.

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