Properti celah kisi CSS
Contoh
Atur jarak antara baris dan kolom menjadi 50px:
.grid-container {
grid-gap: 50px;
}
Definisi dan Penggunaan
Properti grid-gap
menentukan ukuran celah antara baris dan kolom dalam tata letak kisi, dan merupakan properti singkatan untuk properti berikut:
Catatan: Properti ini diubah namanya menjadi di CSS3.
gap
Nilai bawaan: | 0 0 |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | Modul Tata Letak Grid CSS Level 1 |
Sintaks JavaScript: | objek .style.gridGap="50px 100px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
grid-gap | 57 | 16 | 52 | 10 | 44 |
Sintaks CSS
grid-gap: grid-row-gap grid-column-gap;
Nilai properti
Value | Description | Play it |
---|---|---|
grid-row-gap | Sets the size of the gap between the rows in a grid layout. 0 is the default value | |
grid-column-gap | Sets the size of the gap between the columns in a grid layout. 0 is the default value |
Lebih Banyak Contoh
Contoh
Atur jarak antara baris ke 20px, dan kolom ke 50px:
.grid-container {
grid-gap: 20px 50px;
}
Halaman Terkait
Tutorial CSS: Tata Letak Kotak CSS
Referensi CSS: Properti grid-row- gap
Referensi CSS: Properti grid-column - gap