Atribut grid CSS

halaman sebelumnya gap
Halaman berikutnya grid-area

Definisi dan penggunaan

Properti grid adalah singkatan dari berbagai properti berikut:

Silakan lihat:

Contoh

Contoh 1

Buat layout grid tiga kolom, di mana tinggi baris pertama adalah 150 pixel:

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

Coba sendiri

Contoh 2

Tentukan dua baris, di mana 'item1' melintasi dua kolom pertama dari dua baris pertama (menggunakan layout grid lima kolom):

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

Coba sendiri

Contoh 3

Berikan nama kepada 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 {
  display: grid;
  grid:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

Coba sendiri

Syntaks CSS

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;

Nilai properti

Nilai	Deskripsi
none	Nilai default. Tidak mendefinisikan ukuran baris atau kolom.
grid-template-rows / grid-template-columns	Ditetapkan ukuran kolom dan baris.
grid-template-areas	Ditetapkan susunan grid yang menggunakan proyek bernama.
grid-template-rows / grid-auto-columns	Ditetapkan ukuran baris (tinggi) dan ukuran kolom otomatis.
grid-auto-rows / grid-template-columns	Ditetapkan ukuran baris otomatis, dan setting properti grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns	Ditetapkan ukuran baris (tinggi), bagaimana menggantikan objek otomatis, dan ukuran kolom otomatis.
grid-auto-flow grid-auto-rows / grid-template-columns	Ditetapkan bagaimana menggantikan objek otomatis, ukuran baris otomatis, dan setting properti grid-template-columns.
initial	Setel properti ini ke nilai default. Lihat: initial.
inherit	Mengambil properti ini dari elemen orang tua. Lihat: inherit.

Detil teknis

Nilai default:	none none none auto auto row
Inheritance:	no
Pembuatan animasi:	yes, see individual properties. Please see:Properti yang berhubungan dengan animasi.
Versi:	Modul Susunan Grid CSS Level 1
Syntaks JavaScript:	object.style.grid="250px / auto auto auto"