Atribut CSS grid-template

Definisi dan penggunaan

Atribut grid-template adalah singkatan dari berikut ini atribut:

Silakan lihat:

Panduan CSS:Proyek Grid CSS

Panduan Referensi CSS:Atribut grid-area

Panduan Referensi CSS:Atribut grid-template-rows

Panduan Referensi CSS:Atribut grid-template-columns

Panduan Referensi CSS:Atribut grid-template-areas

Contoh

Contoh 1

Membuat tata letak grid tiga kolom dengan tinggi 150 pixel pertama:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Coba sendiri

Contoh 2

Tentukan 2 baris, di mana "item1" melintasi 2 kolom pertama di 2 baris pertama (dalam layout grid 5 kolom):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    '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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Coba sendiri

Syntaks CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Nilai properti
Nilai Deskripsi
none Nilai default. Tidak menentukan ukuran kolom atau baris.
grid-template-rows / grid-template-columns Tentukan ukuran kolom dan baris.
grid-template-areas Tentukan penggunaan layout grid dengan nama item.
initial Setel properti ini ke nilai default. Lihat initial.
inherit Mengambil properti ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: none none none
Warisan: Tidak
Produksi animasi: Dukungan. Lihat:Properti yang berhubungan dengan animasi.
Versi: Modul Layout Grid CSS Level 1
Syntaks JavaScript: object.style.gridTemplate = "250px / auto auto"

Dukungan browser

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

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