Sifat CSS grid-gap

Definisi dan penggunaan

Properti grid-gap menentukan ukuran jarak antara baris dan kolom di layout grid, dan ia adalah singkatan dari properti berikut ini:

Perhatian:Properti ini diubah namanya di CSS3 menjadi gap.

Lihat juga:

Panduan CSS:Layout Grid CSS

Panduan referensi CSS:Properti grip-row-gap

Panduan referensi CSS:Properti grip-column-gap

Contoh

Contoh 1

Tetapkan singkatan antara baris dan kolom menjadi 50 piksel:

.grid-container {
  grid-gap: 50px;
}

Coba sendiri

Contoh 2

Atur jarak antara baris menjadi 20 piksel, jarak antara kolom menjadi 50 piksel:

.grid-container {
  grid-gap: 20px 50px;
}

Coba sendiri

Sintaksis CSS

grid-gap: grid-row-gap grid-column-gap;

Nilai properti

Nilai Deskripsi
grid-row-gap Atur ukuran jarak antara baris di layout grid. Nilai defaultnya adalah 0.
grid-column-gap Atur ukuran jarak antara kolom. Nilai defaultnya adalah 0.

Detil teknis

Nilai default: 0 0
Warisan: Tidak
Pembuatan animasi: Dukungan. Lihat:Properti berhubungan dengan animasi.
Versi: Modul Layout Grid CSS Level 1
Sintaksis JavaScript: object.style.gridGap="50px 100px"

Dukungan browser

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

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