Panduan CSS Gap Decorations untuk Layout Grid yang Lebih Ekspresif

Selama bertahun-tahun, developer CSS punya satu keluhan yang sama: kenapa styling gutter di grid itu susah sekali?

Kamu punya layout grid yang rapi, tapi begitu mau kasih pemisah visual antar kolom — entah itu garis tipis, gradien, atau sekadar warna — langsung butuh trik yang merepotkan.

Nah, 2026 membawa jawaban resminya: CSS Gap Decorations.

Masalah Lama: Kenapa Styling Gutter di Grid Selalu Butuh Workaround

Bayangkan kamu punya layout card grid 3 kolom. Desainer minta ada garis vertikal tipis sebagai pemisah antar kartu.

Secara logika, harusnya simpel. Tapi kenyataannya?

Kamu akan mulai dengan border-right di setiap item, lalu sadar bahwa kolom terakhir ikut dapat border. Lalu kamu tambahkan nth-child selector untuk menghilangkannya. Lalu kamu sadar di responsive layout, jumlah kolom berubah, dan selector-mu jadi salah semua.

Solusi alternatifnya juga tidak lebih bersih:

• Pseudo-element ::before / ::after — harus diposisikan manual, rentan geser saat konten berubah
• Negative margin trick — bikin overflow dan clipping jadi nightmare
• Box shadow berlapis — performa buruk, sulit di-maintain
• SVG background di container — tidak skalabel sama sekali

Masalah intinya adalah gap di grid bukan elemen HTML. Ia adalah ruang kosong yang dikelola browser. Tidak ada DOM node yang bisa kamu target dengan CSS selector biasa.

Sampai sekarang.

Apa Itu CSS Gap Decorations dan Cara Kerjanya

CSS Gap Decorations adalah spesifikasi CSS baru yang memberikan kamu kontrol langsung atas styling ruang antar item di dalam grid dan flexbox layout.

Ide dasarnya sederhana: browser menggambar dekorasi di dalam area gap, tanpa kamu perlu manipulasi DOM atau menambah elemen dummy.

Spesifikasi ini bukan sekadar ekstensi dari gap property yang sudah ada. Ini adalah set properti baru yang bekerja mirip dengan column-rule di multi-column layout — tapi diperluas untuk grid dua dimensi.

Cara kerjanya secara teknis:

1. Browser menghitung posisi semua gap (row gap dan column gap) setelah layout selesai
2. Gap decorations digambar di lapisan antara background grid container dan konten item
3. Dekorasi tidak mempengaruhi ukuran gap — gap tetap mengontrol ukuran, decorations hanya visual

Ini penting: gap decorations tidak menambah atau mengurangi spasi. Mereka murni presentasional.

Sintaks Lengkap: column-rule, row-rule, dan Shorthand-nya

Gap decorations memperkenalkan beberapa properti baru. Mari kita bedah satu per satu.

column-rule di dalam Grid Context

Kamu mungkin sudah kenal column-rule dari multi-column layout. Di konteks grid, propertinya diperluas dengan sub-properti berikut:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  /* Garis vertikal antar kolom */
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: #e2e8f0;
}

Shorthand-nya seperti biasa:

.grid-container {
  column-rule: 1px solid #e2e8f0;
}

row-rule — Properti Baru untuk Grid

Ini properti yang betul-betul baru. row-rule bekerja persis seperti column-rule tapi untuk garis horizontal antar baris:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 32px;

  column-rule: 1px solid #e2e8f0;
  row-rule: 1px dashed #cbd5e1;
}

Sub-propertinya mengikuti pola yang sama:

.grid-container {
  row-rule-width: 2px;
  row-rule-style: dotted;
  row-rule-color: oklch(70% 0.15 220);
}

Shorthand gap-rule

Untuk styling keduanya sekaligus, kamu bisa pakai shorthand gap-rule:

.grid-container {
  /* Format: row-rule / column-rule */
  gap-rule: 1px dashed #94a3b8 / 2px solid #3b82f6;
}

Kalau kamu mau keduanya sama:

.grid-container {
  gap-rule: 1px solid #e2e8f0;
}

Style Values yang Didukung

Gap decorations mendukung semua nilai border-style yang familiar:

.grid-container {
  /* Semua ini valid */
  column-rule-style: solid;
  column-rule-style: dashed;
  column-rule-style: dotted;
  column-rule-style: double;
  column-rule-style: groove;
  column-rule-style: ridge;
}

Dan yang lebih menarik — kamu bisa pakai gradien sebagai nilai color:

.grid-container {
  column-rule-color: linear-gradient(to bottom, transparent, #6366f1, transparent);
}

Ini yang selama ini tidak bisa dilakukan dengan border biasa.

gap-rule-paint-order

Properti ini mengontrol urutan rendering saat column-rule dan row-rule berpotongan:

.grid-container {
  gap-rule-paint-order: column row; /* column digambar duluan */
  /* atau */
  gap-rule-paint-order: row column; /* row digambar duluan */
}

Di titik perpotongan (intersection) antar gap, salah satu harus "menang". gap-rule-paint-order menentukan mana yang tampil di atas.

Studi Kasus: Redesign Layout Tabel dan Card Grid dengan Gap Decorations

Kasus 1: Card Grid dengan Separator Bersih

Sebelumnya, untuk membuat grid kartu produk dengan pemisah visual, kamu butuh ini:

/* Cara lama — verbose dan rapuh */
.card-grid .card {
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.card-grid .card:nth-child(3n) {
  border-right: none;
}

.card-grid .card:nth-last-child(-n+3) {
  border-bottom: none;
}

/* Ini rusak begitu layout berubah di breakpoint */

Sekarang dengan gap decorations:

/* Cara baru — bersih dan robust */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  padding: 24px;

  gap-rule: 1px solid #e2e8f0;
}

.card-grid .card {
  padding: 20px;
}

Tidak ada selector berbasis nth-child. Tidak ada logic yang bergantung pada jumlah kolom. Berfungsi di semua breakpoint secara otomatis.

Kasus 2: Layout Data Table Visual

Misalnya kamu membangun tampilan data tabel dengan CSS Grid (bukan elemen <table>):

.data-table {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0;

  /* Garis horizontal antar baris */
  row-rule: 1px solid #f1f5f9;

  /* Garis vertikal antar kolom — lebih tebal untuk header */
  column-rule: 1px solid #e2e8f0;
}

.data-table-header {
  display: contents; /* biar item-nya ikut grid parent */
}

.data-table-header > * {
  background: #f8fafc;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 0.875rem;
  color: #64748b;
}

.data-table-body > * {
  padding: 14px 16px;
  border: none; /* tidak perlu border manual lagi */
}

Hasilnya jauh lebih predictable dan tidak ada border yang "loncat" saat data di-sort atau di-filter secara dinamis.

Kasus 3: Gradien Gap untuk Dashboard Modern

Ini salah satu use case yang paling menarik — sesuatu yang sebelumnya hampir tidak mungkin dilakukan dengan bersih:

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 32px;

  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: linear-gradient(
    to bottom,
    transparent 0%,
    #6366f1 20%,
    #6366f1 80%,
    transparent 100%
  );

  row-rule-width: 1px;
  row-rule-style: solid;
  row-rule-color: linear-gradient(
    to right,
    transparent 0%,
    #6366f1 20%,
    #6366f1 80%,
    transparent 100%
  );
}

Efeknya? Garis pemisah yang memudar di ujung-ujungnya — desain yang terlihat premium dan selama ini butuh SVG atau pseudo-element yang kompleks.

Kombinasi Gap Decorations dengan CSS Subgrid untuk Layout Kompleks

Gap decorations menjadi jauh lebih powerful ketika dikombinasikan dengan CSS Subgrid.

Bayangkan layout majalah dengan grid utama yang punya header, sidebar, dan konten. Subgrid memungkinkan elemen anak mewarisi track dari grid induk. Dan gap decorations pada parent grid akan ikut teraplikasi pada subgrid secara konsisten.

.magazine-layout {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 24px;

  /* Dekorasi di level parent */
  column-rule: 1px solid #e2e8f0;
  row-rule: 1px solid #f1f5f9;
}

.article-section {
  grid-column: 2 / -1;
  display: grid;

  /* Subgrid mewarisi kolom dari parent */
  grid-template-columns: subgrid;
  gap: 24px;

  /* Gap decoration di subgrid tetap konsisten dengan parent */
  column-rule: 2px solid #6366f1;
}

Yang menarik di sini: setiap level grid bisa punya gap decoration sendiri yang override dekorasi dari parent, atau bisa dibiarkan mewarisinya.

Ini sangat berguna untuk layout editorial kompleks di mana kamu ingin konsistensi visual tapi tetap butuh fleksibilitas di beberapa section.

Kontrol per-Track dengan gap-rule-break

Untuk kasus di mana kamu tidak mau dekorasi muncul di semua gap, ada properti gap-rule-break yang memungkinkan kamu mengontrol apakah dekorasi putus di area span:

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;

  column-rule: 1px dashed #cbd5e1;

  /* Jangan gambar garis di titik di mana item span melewati gap */
  gap-rule-break: spanning-item;
}

Dengan spanning-item, item yang grid-column: span 2 tidak akan punya garis di tengah area yang ia span. Ini behavior yang intuitif dan sering kamu inginkan.

Browser Support dan Cara Pakai Sekarang

Per Juli 2026, CSS Gap Decorations sudah masuk di Chrome Canary dan Firefox Nightly dengan flag aktif. Support stabil masih dalam proses.

Untuk produksi, gunakan feature detection:

/* Fallback dulu */
.card-grid .card + .card {
  border-left: 1px solid #e2e8f0;
}

/* Override kalau browser sudah support */
@supports (column-rule: 1px solid red) {
  .card-grid .card + .card {
    border-left: none;
  }

  .card-grid {
    column-rule: 1px solid #e2e8f0;
  }
}

Pola ini memastikan layout tetap punya pemisah visual di browser lama, dan secara otomatis beralih ke gap decorations di browser yang sudah mendukung.

CSS Gap Decorations bukan sekadar syntactic sugar. Ini solusi arsitektural yang mengisi lubang nyata di CSS Grid yang sudah ada sejak spesifikasi pertama dirilis.

Gutter adalah bagian integral dari layout, dan sudah sewajarnya mereka bisa di-style dengan cara yang sama intuitifnya dengan cara kita menge-style elemen lain.

Kalau kamu selama ini menghindari pemisah visual di grid karena repot, saatnya reconsider.

Kesulitan dengan tugas programming atau butuh bantuan coding? KerjaKode siap membantu menyelesaikan tugas IT dan teknik informatika Anda. Dapatkan bantuan profesional di jasa tugas IT KerjaKode.