Properti grid-gap CSS

Definisi dan penggunaan

Atribut grid-gap menentukan ukuran jarak antara baris dan kolom di layout grid, dan ia adalah atribut singkatan untuk berbagai atribut berikut:

Perhatian:Atribut ini telah diubah namanya di CSS3 menjadi gap.

Lihat pula:

Pelajaran CSS:Layout Grid CSS

Panduan Referensi CSS:Atribut grip-row-gap

Panduan Referensi CSS:Atribut grip-column-gap

Contoh

Contoh 1

Tetapkan singkatan antara baris dan kolom menjadi 50 pixel:

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

Coba sendiri

Contoh 2

Atur jarak antar baris menjadi 20 pixel, dan jarak antar kolom menjadi 50 pixel:

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

Coba sendiri

Syarat Bahasa CSS

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

Nilai atribut

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

Detil teknis

Nilai standar: 0 0
Warisan: Tidak
Produksi animasi: Dukung. Lihat pula:Atribut berhubungan dengan animasi.
Versi: Modul Layout Grid CSS Level 1
Syarat Bahasa JavaScript: object.style.gridGap="50px 100px"

Dukungan browser

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

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