The Gap Strikes Back: CSS Gap Kini Bisa Ditata Gayanya

• Sebelumnya, kita bisa membuat jarak dengan properti CSS gap, tetapi bagian gap itu sendiri tidak bisa diberi gaya, sehingga diperlukan berbagai cara akal-akalan (elemen tambahan, border, pseudo-element, dan lain-lain)
• Fitur baru CSS gap decorations memungkinkan kita menggambar garis pemisah (separator) langsung di antara item layout dengan properti seperti row-rule, column-rule, dan lainnya
• Dekorasi dapat diterapkan di semua layout utama seperti Grid, Flexbox, Multi-column, dan segera Masonry, sehingga peningkatan struktural/visual bisa dilakukan hanya dengan CSS murni tanpa markup tambahan atau elemen yang tidak perlu
• Mendukung pengulangan/kombinasi berbagai gaya (ketebalan, warna, pola, dll.) dan dapat dikontrol secara presisi dengan repeat(), outset, paint-order, dan lain-lain
• Saat ini hanya bisa digunakan di keluarga Chromium (Chrome/Edge 139+) dengan flag diaktifkan, dan masih dalam proses standardisasi serta perluasan

---

Batasan gap lama dan perubahannya

• Dulu, area gap sulit untuk diberi gaya, dan kita harus menambahkan border pemisah atau elemen palsu untuk separator
• Pendekatan seperti ini menimbulkan berbagai kelemahan terkait ukuran layout, aksesibilitas, kompleksitas markup, dan lain-lain
• Kini standar gap decorations hadir, sehingga dekorasi (seperti garis) dapat diterapkan pada area jarak hanya dengan properti CSS sederhana

Pengenalan CSS gap decorations

• column-rule: digunakan untuk menggambar garis pemisah vertikal pada multi-column yang sudah ada (contoh: column-rule: 1px solid black;)
• Kini properti ini juga bisa digunakan pada flexbox, grid, dan lainnya

  .my-grid-container {  
    display: grid;  
    gap: 2px;  
    column-rule: 2px solid pink;  
  }  
  

• row-rule: dapat menggambar separator antarbaris (horizontal)

  .my-flex-container {  
    display: flex;  
    gap: 10px;  
    row-rule: 10px dotted limegreen;  
    column-rule: 5px dashed coral;  
  }  
  

• Pengulangan/kombinasi banyak gaya: repeat() atau pemisahan dengan koma memungkinkan pencampuran berbagai gaya

  .my-container {  
    display: grid;  
    gap: 2px;  
    row-rule:  
      repeat(2, 1px dashed red),  
      2px solid black,  
      repeat(auto, 1px dotted green);  
  }  
  

• Properti kontrol presisi: row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order, dan lainnya memungkinkan pengaturan rinci untuk posisi, titik perpotongan, urutan tumpang tindih, dan sebagainya

Contoh: penerapan praktis gap decorations

• Halaman contoh menetapkan body sebagai grid, lalu memisahkan header/nav/main/footer dengan gap
• Dengan row-rule, garis pemisah dengan ketebalan, warna, dan gaya berbeda bisa diterapkan
• Menu nav menggunakan flexbox dan column-rule untuk menggambar garis di antara item
• Area main menggunakan flexbox untuk menyusun gambar dan teks dalam bentuk masonry, lalu menegaskan struktur bergaya grid dengan row-rule dan column-rule
• Dengan column-rule-outset: 0; dan sejenisnya, posisi awal/akhir garis dapat disesuaikan secara presisi

Dukungan browser dan cara mengaktifkan

• Saat ini, di browser berbasis Chromium seperti Chrome/Edge 139+, fitur ini memerlukan aktivasi flag (about://flags → Experimental Web Platform Features)
• Standardisasi resmi masih berlangsung, dan berbagai umpan balik serta eksperimen sangat dianjurkan

Pelajari lebih lanjut dan Playground

• Draf standar CSS Gap Decorations Module Level 1
• Explainer Microsoft Edge
• Di Playground interaktif, Anda bisa bereksperimen secara visual dengan berbagai kombinasi dekorasi
• Isu terkait fitur, kompatibilitas, dan umpan balik dapat diajukan di Chromium issue tracker