属性 CSS grid-template

Definisi dan penggunaan

Atribut grid-template adalah singkatan untuk atribut berikut:

Lihat juga:

Panduan CSS:Item Grid CSS

Panduan Rujukan CSS:Atribut grid-area

Panduan Rujukan CSS:Atribut grid-template-rows

Panduan Rujukan CSS:Atribut grid-template-columns

Panduan Rujukan CSS:Atribut grid-template-areas

Contoh

Contoh 1

Buat susun tatasusun tiga kolom dengan tinggi 150 pixel pertama:

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

Coba sendiri

Contoh 2

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

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

Coba sendiri

Contoh 3

Mengenalkan semua proyek, kemudian 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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Coba sendiri

Syarat Bahasa CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Nilai atribut
Nilai Deskripsi
none Nilai baku. Tidak menentukan ukuran kolom atau baris.
grid-template-rows / grid-template-columns Tentukan ukuran kolom dan baris.
grid-template-areas Tentukan susun grid dengan penggunaan proyek nama.
initial Atur atribut ini ke nilai baku. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai baku: none none none
Warisan: Tidak
Pembuatan animasi: Didukung. Lihat:Atribut berhubungan dengan animasi.
Versi: Modul Susun Grid CSS Level 1
Syarat Bahasa JavaScript: object.style.gridTemplate = "250px / auto auto"

Dukungan browser

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

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