Properti gap
CSS telah tersedia untuk mesin tata letak Multi-Kolom dan CSS Flexbox Chromium.
Kesenjangan CSS
gap
bersifat relatif alur, yang berarti berubah
secara dinamis berdasarkan arah aliran konten. Misalnya, gap
akan otomatis menyesuaikan dengan berbagai nilai writing-mode
atau direction
yang Anda tetapkan untuk pengguna internasional Anda. Hal ini secara signifikan mengurangi beban tantangan jarak bagi
komponen dan penulis CSS. Mengurangi penskalaan kode lebih lanjut.
Kompatibilitas browser
Penggunaan
gap
menerima panjang
atau persentase CSS sebagai nilai.
.gap-example {
display: grid;
gap: 10px;
gap: 2ch;
gap: 5%;
gap: 1em;
gap: 3vmax;
}
Celah dapat dilewati 1 panjang, yang akan digunakan untuk baris dan kolom.
.grid { display: grid; gap: 10px; }
.grid { display: grid; row-gap: 10px; column-gap: 10px; }
Celah dapat dilewati 2 panjang, yang akan digunakan untuk baris dan kolom.
.grid { display: grid; gap: 10px 5%; }
.grid { display: grid; row-gap: 10px; column-gap: 5%; }
Flexbox gap
Sebelum gap
berada di Flexbox, strategi melibatkan margin negatif, pemilih yang kompleks,
pemilih class pseudo jenis :last
atau :first
, atau cara lain untuk mengelola ruang
dari kumpulan turunan yang disusun secara dinamis dan digabungkan.
Percobaan Sebelumnya
Berikut adalah pola-pola yang telah digunakan orang-orang untuk mendapatkan spasi mirip-celah.
.layout > :not(:last-child) { margin-bottom: 10px; margin-right: 10px; }
.layout > * + * { margin-bottom: 10px; margin-right: 10px; }
Namun, hal di atas bukan pengganti penuh untuk gap
, dan sering kali memerlukan penyesuaian @media
atau :lang()
untuk memperhitungkan skenario penggabungan, mode, atau arah penulisan.
Menambahkan satu atau dua kueri media sepertinya tidak akan terlalu buruk, tetapi kueri tersebut dapat bertambah dan
menyebabkan logika tata letak yang rumit.
Yang sebenarnya dimaksudkan penulis di atas adalah tidak adanya sentuhan item turunan.
Antidot: celah
.layout {
display: flex;
gap: 10px;
}
Pada 2 contoh pertama (tanpa gap
Flexbox), turunan ditargetkan dan
diberi jarak dari elemen lain. Dalam contoh kesenjangan penangkal, container memiliki spasi. Setiap turunan dapat membebaskan bebannya sendiri, sekaligus
memusatkan jarak kepemilikan. Menyederhanakan konsistensi. Mengurutkan ulang,
mengubah area pandang, menghapus elemen, menambahkan elemen baru, dll. serta jarak tetap
konsisten. Tidak ada pemilih baru, tidak ada kueri media baru, hanya spasi.
Update Chromium DevTools
Dengan update ini, perubahan pada Chromium DevTools juga akan diterapkan, perhatikan bagaimana panel Styles
menangani grid-gap
dan gap
sekarang 👍
DevTools mendukung grid-gap
dan gap
, ini karena gap
pada dasarnya
adalah alias untuk sintaksis sebelumnya.
Potensi tata letak baru
Dengan Flexbox gap
, kami mendapatkan lebih dari sekadar kenyamanan. Kita membuka tata letak intrinsik
yang hebat, berjarak sempurna. Dalam video dan contoh kode berikut di bawah ini, Grid
tidak dapat mencapai tata letak yang dapat dilakukan Flexbox. {i>Grid<i} harus memiliki baris dan kolom yang
sama, meskipun jika ditetapkan secara intrinsik.
Selain itu, perhatikan seberapa dinamis jarak antar-turunan jika gabungan tersebut secara intrinsik
seperti itu. Kueri media tidak dapat mendeteksi penggabungan seperti itu untuk melakukan penyesuaian yang cerdas.
gap
Flexbox dapat, dan akan, melakukannya untuk Anda di semua internasionalisasi.
Multi-kolom gap
Selain Flexbox yang mendukung sintaksis gap
, tata letak multi-kolom juga mendukung
sintaksis gap
yang lebih pendek.
article {
column-width: 40ch;
column-gap: 5ch;
gap: 5ch;
}
Cukup bagus.