Atribut gap CSS

Definisi dan penggunaan

Atribut gap menentukan ukuran jarak antara baris dan kolom di flexbox, grid, atau tata letak berbagai kolom. Ini adalah singkatan untuk atribut berikut:

Perhatian:Atribut gap sebelumnya disebut: grid-gap.

Lihat Juga:

Panduan CSS:Tata letak grid CSS

Panduan CSS:Tata letak kerangka elastis CSS

Panduan CSS:Tata letak berbagai kolom CSS

Panduan Referensi CSS:Atribut row-gap

Panduan Referensi CSS:Atribut column-gap

Contoh

Contoh 1

Atur jarak antara baris dan kolom menjadi 50px:

.grid-container {
  gap: 50px;
}

Coba Sendiri

Contoh 2: Tata letak grid

Atur jarak baris menjadi 20px dan jarak kolom menjadi 50px dalam tata letak grid:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Coba Sendiri

Contoh 3: Tata letak kerangka elastis

Atur jarak baris menjadi 20px dan jarak kolom menjadi 70px dalam tata letak kerangka elastis:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Coba Sendiri

Contoh 4: Tata letak berbagai kolom

Atur jarak kolom dalam tata letak berbagai kolom menjadi 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Coba Sendiri

Syarat CSS

gap: row-gap column-gap|initial|inherit;
Nilai Deskripsi
row-gap Atur ukuran jarak antara baris di grid atau kerangka elastis.
column-gap Atur ukuran jarak antara kolom di grid, kerangka elastis, atau tata letak berbagai kolom.
initial Atur atribut ini ke nilai standarnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai standar: normal normal
Menggantikan: Tidak
Pembuatan animasi: Dukung. Lihat atribut yang terpisah. Lihat:Atribut yang berhubungan dengan animasi.
Versi: Modul Sisipan Kotak CSS Level 3
Syarat Bahasa JavaScript: object.style.gap="50px 100px"

Dukungan Browser

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

Tata Letak Chrome IE / Edge Firefox Safari Opera
Dalam grid 66 16 61 12 53
Dalam kerangka elastis 84 84 63 14.1 70
Dalam kolom berbagai 66 16 61 Tidak Dukung 53