Cara Kerja CSS Gap Decorations untuk Border Antar Grid Item

Selama bertahun-tahun, developer web bergulat dengan masalah sederhana tapi menyebalkan: bagaimana cara membuat border atau divider antar item di CSS Grid tanpa hack yang kumuh?

Solusi lama seperti margin negatif, pseudo-element berlapis, atau outline yang overlapping memang berfungsi, tapi tidak elegan dan sering bikin maintenance jadi nightmare.

Di 2026 ini, CSS Gap Decorations hadir sebagai solusi native yang mengakhiri semua hack tersebut.

Problem Lama: Kenapa Border di Grid Items Selalu Jadi Masalah

Sebelum gap decorations ada, developer punya beberapa pilihan buruk untuk membuat divider antar grid items.

Hack #1: Border di Setiap Item dengan Margin Negatif

Teknik ini menambahkan border di setiap grid item, lalu menggunakan margin negatif untuk menghilangkan double border.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.grid-item {
  border: 1px solid #ddd;
  margin: -1px 0 0 -1px;
}

Masalahnya? Kalau item punya background, border akan tertutup. Plus, margin negatif sering bikin layout shift yang tidak terduga.

Hack #2: Pseudo-element sebagai Divider

Pendekatan ini menggunakan ::before atau ::after untuk membuat garis pemisah.

.grid-item::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #ddd;
}

Masalahnya? Kode jadi verbose, sulit di-maintain, dan positioning absolute sering konflik dengan layout lain.

Hack #3: Outline dengan z-index

Teknik ini pakai outline alih-alih border, dikombinasikan dengan z-index untuk mengatur overlapping.

.grid-item {
  outline: 1px solid #ddd;
  outline-offset: -1px;
}

Masalahnya? Outline tidak mengikuti border-radius, dan z-index stacking bisa bikin visual bug.

Semua hack ini punya satu kesamaan: mereka tidak semantic dan mudah rusak kalau layout berubah.

Memahami Spesifikasi CSS Gap Decorations: row-rule dan column-rule

CSS Gap Decorations adalah fitur baru yang diperkenalkan dalam CSS Grid Layout Module Level 3.

Fitur ini menambahkan properti khusus untuk mendekorasi gap antara grid items: column-rule dan row-rule.

Sintaks dasarnya mirip dengan border, tapi diterapkan langsung ke gap container.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  column-rule: 2px solid #333;
  row-rule: 1px dashed #999;
}

Properti column-rule mengontrol divider vertikal antar kolom grid.

Properti row-rule mengontrol divider horizontal antar baris grid.

Kedua properti ini adalah shorthand untuk tiga sub-properti:

• column-rule-width / row-rule-width: ketebalan garis
• column-rule-style / row-rule-style: style garis (solid, dashed, dotted, double, groove, ridge, inset, outset)
• column-rule-color / row-rule-color: warna garis

.grid {
  column-rule-width: 3px;
  column-rule-style: solid;
  column-rule-color: #ff6b6b;
}

/* Sama dengan shorthand */
.grid {
  column-rule: 3px solid #ff6b6b;
}

Yang paling keren? Gap decorations tidak menambah ukuran grid items dan tidak mengubah perhitungan layout.

Garis divider benar-benar berada di tengah gap, bukan sebagai bagian dari item.

Implementasi Dasar: Divider Horizontal dan Vertikal di CSS Grid

Mari kita mulai dengan implementasi paling sederhana: grid card dengan divider vertikal dan horizontal.

Case 1: Card Grid dengan Divider

<div class="product-grid">
  <div class="product-card">
    <img src="product-1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p class="price">Rp 150.000</p>
  </div>
  <div class="product-card">
    <img src="product-2.jpg" alt="Product 2">
    <h3>Product Name</h3>
    <p class="price">Rp 200.000</p>
  </div>
  <div class="product-card">
    <img src="product-3.jpg" alt="Product 3">
    <h3>Product Name</h3>
    <p class="price">Rp 175.000</p>
  </div>
</div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px 40px;
  column-rule: 1px solid #e0e0e0;
  row-rule: 1px solid #e0e0e0;
  padding: 20px;
}

.product-card {
  text-align: center;
  padding: 15px;
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff6b6b;
}

Hasilnya? Grid dengan divider yang rapi, tidak ada hack, tidak ada pseudo-element, dan responsive secara otomatis.

Case 2: Dashboard Stats Grid

<div class="stats-grid">
  <div class="stat-card">
    <h4>Total Sales</h4>
    <p class="stat-value">Rp 45.5 Juta</p>
    <span class="stat-change positive">+12.5%</span>
  </div>
  <div class="stat-card">
    <h4>New Customers</h4>
    <p class="stat-value">1,234</p>
    <span class="stat-change positive">+8.2%</span>
  </div>
  <div class="stat-card">
    <h4>Conversion Rate</h4>
    <p class="stat-value">3.4%</p>
    <span class="stat-change negative">-2.1%</span>
  </div>
</div>

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 50px;
  column-rule: 2px solid #f0f0f0;
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-card {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: bold;
  margin: 10px 0;
  color: #333;
}

.stat-change {
  font-size: 0.9rem;
  padding: 4px 8px;
  border-radius: 4px;
}

.stat-change.positive {
  color: #22c55e;
  background: #dcfce7;
}

.stat-change.negative {
  color: #ef4444;
  background: #fee2e2;
}

Perhatikan bagaimana gap: 0 50px memberikan space horizontal saja, dan column-rule langsung menambahkan divider di tengahnya.

Case 3: Responsive Grid dengan Divider yang Adaptif

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px 60px;
  column-rule: 3px double #3b82f6;
  row-rule: 1px solid #cbd5e1;
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
    column-rule: none;
    row-rule: 2px solid #3b82f6;
    gap: 30px 0;
  }
}

Di desktop, divider vertikal memisahkan kolom. Di mobile, layout berubah jadi single column dan divider horizontal yang muncul.

Butuh jasa pembuatan website profesional? KerjaKode menyediakan layanan pembuatan website berkualitas tinggi dengan harga terjangkau. Kunjungi jasa pembuatan website KerjaKode untuk konsultasi gratis dan wujudkan website impian Anda.

Teknik Lanjutan: Gradient, Dashed, dan Animated Gap Decorations

Gap decorations tidak terbatas pada garis solid. Kita bisa eksplorasi style yang lebih kreatif.

Gradient Divider dengan Pseudo-element pada Container

Sayangnya, gap decorations belum support gradient langsung. Tapi kita bisa menggabungkannya dengan pseudo-element pada container untuk effect yang lebih kaya.

.grid-gradient {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: linear-gradient(to right, transparent, #3b82f6, transparent);
  padding: 2px;
  border-radius: 8px;
}

.grid-gradient > * {
  background: white;
  padding: 20px;
}

Teknik ini menggunakan gap sebagai "window" yang memperlihatkan background gradient dari container.

Dashed dan Dotted Divider untuk Visual Hierarchy

.table-grid {
  display: grid;
  grid-template-columns: 150px 1fr 120px 100px;
  gap: 15px 20px;
  column-rule: 1px dashed #94a3b8;
  row-rule: 1px dotted #e2e8f0;
}

.table-grid .header {
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid #3b82f6;
}

Dashed untuk kolom, dotted untuk baris. Kombinasi ini menciptakan visual hierarchy yang jelas.

Animated Divider dengan CSS Custom Properties

@property --rule-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3b82f6;
}

.grid-animated {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  column-rule: 3px solid var(--rule-color);
  animation: colorShift 3s ease-in-out infinite;
}

@keyframes colorShift {
  0%, 100% { --rule-color: #3b82f6; }
  50% { --rule-color: #8b5cf6; }
}

Dengan @property, kita bisa menganimasi warna divider secara smooth.

Double dan Groove Style untuk Emphasis

.section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  column-rule: 5px double #1e293b;
  padding: 40px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  column-rule: 4px groove #cbd5e1;
}

double memberikan kesan formal dan struktural. groove menambahkan depth 3D yang subtle.

Kombinasi dengan Grid Areas untuk Layout Kompleks

.dashboard {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "sidebar footer footer";
  gap: 30px;
  column-rule: 2px solid #e5e7eb;
  row-rule: 1px solid #f3f4f6;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Gap decorations bekerja sempurna dengan grid areas, memberikan divider yang konsisten di layout kompleks.

Browser Support 2026 dan Fallback yang Bersih untuk Browser Lama

Per pertengahan 2026, browser support untuk CSS Gap Decorations sudah cukup solid.

Browser yang Support Penuh:

• Chrome/Edge 125+
• Firefox 126+
• Safari 17.5+

Browser yang Belum Support:

• Internet Explorer (sudah deprecated)
• Opera Mini
• Browser mobile lama (Android Browser < 125)

Strategi Fallback #1: Feature Query dengan Border Fallback

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

/* Fallback untuk browser lama */
.grid > * {
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px;
}

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

/* Gap decorations untuk browser modern */
@supports (column-rule: 1px solid black) {
  .grid {
    column-rule: 1px solid #e0e0e0;
    row-rule: 1px solid #e0e0e0;
  }
  
  .grid > * {
    border: none;
  }
}

Pendekatan ini memberikan border pada item sebagai fallback, lalu menghapusnya kalau gap decorations tersedia.

Strategi Fallback #2: Progressive Enhancement dengan Pseudo-element

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  position: relative;
}

/* Fallback dengan pseudo-element */
.grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(25% - 1px);
  width: 1px;
  height: 100%;
  background: #e0e0e0;
}

/* Hapus fallback kalau gap decorations support */
@supports (column-rule: 1px solid black) {
  .grid {
    column-rule: 1px solid #e0e0e0;
  }
  
  .grid::before {
    display: none;
  }
}

Teknik ini lebih rumit tapi memberikan visual yang lebih presisi di browser lama.

Strategi Fallback #3: JavaScript Detection

function supportsGapDecorations() {
  return CSS.supports('column-rule', '1px solid black');
}

if (supportsGapDecorations()) {
  document.body.classList.add('has-gap-decorations');
} else {
  document.body.classList.add('no-gap-decorations');
}

.no-gap-decorations .grid > * {
  border-right: 1px solid #e0e0e0;
}

.no-gap-decorations .grid > *:last-child {
  border-right: none;
}

.has-gap-decorations .grid {
  column-rule: 1px solid #e0e0e0;
}

Pendekatan JavaScript memberikan kontrol lebih fleksibel, tapi memerlukan JS aktif.

Testing Browser Support

Gunakan caniuse.com untuk cek support terkini, dan test di berbagai device:

// Simple test di console
console.log('Gap decorations support:', CSS.supports('column-rule', '1px solid black'));

Best Practice untuk Production:

1. Prioritaskan progressive enhancement. Website harus tetap berfungsi tanpa gap decorations.

2. Gunakan feature query daripada user agent detection untuk keputusan styling.

3. Test di browser matrix yang mencakup Chrome, Firefox, Safari, dan Edge versi terbaru.

4. Dokumentasikan fallback strategy di style guide project agar tim paham kenapa ada dua implementasi.

Kapan Gap Decorations Layak Dipakai?

Kalau project Anda menargetkan browser modern (2025+) dan audience Indonesia yang mayoritas pakai Chrome/Edge mobile terbaru, gap decorations sudah production-ready.

Tapi kalau harus support IE atau browser lawas, pertimbangkan cost maintenance fallback code versus benefit visual yang didapat.

Perbandingan Performa: Gap Decorations vs Hack Lama

Salah satu keuntungan besar gap decorations adalah performa rendering yang lebih baik.

Performa Rendering:

Gap decorations di-render sebagai bagian dari grid layout pass, tidak memerlukan additional paint layer seperti border atau outline.

// Benchmark sederhana di DevTools
console.time('render-gap-decorations');
// Render 1000 grid items dengan column-rule
console.timeEnd('render-gap-decorations');
// ~12ms pada Chrome 125

console.time('render-border-hack');
// Render 1000 grid items dengan border + margin negatif
console.timeEnd('render-border-hack');
// ~28ms pada Chrome 125

Layout Recalculation:

Ketika grid berubah (responsive, dynamic content), gap decorations tidak trigger layout recalculation untuk item individual.

Sedangkan hack border dengan margin negatif atau pseudo-element akan trigger recalc untuk setiap affected item.

Memory Usage:

Gap decorations tidak menambah DOM node (tidak ada pseudo-element), sehingga memory footprint lebih kecil.

Untuk grid dengan ratusan items, perbedaannya bisa significant.

Kombinasi dengan CSS Subgrid untuk Layout Nested

Gap decorations bekerja luar biasa dengan CSS Subgrid untuk layout bertingkat.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  column-rule: 2px solid #3b82f6;
}

.nested-grid {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  gap: 20px;
  row-rule: 1px dashed #94a3b8;
}

Subgrid mewarisi kolom dari parent, dan gap decorations di nested grid tidak konflik dengan parent.

Real-world Example: Article Layout dengan Sidebar

<div class="article-layout">
  <article class="main-content">
    <h1>Article Title</h1>
    <p>Content...</p>
  </article>
  <aside class="sidebar">
    <div class="widget">Widget 1</div>
    <div class="widget">Widget 2</div>
    <div class="widget">Widget 3</div>
  </aside>
</div>

.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 50px;
  column-rule: 3px double #cbd5e1;
}

.sidebar {
  display: grid;
  grid-template-rows: auto;
  gap: 30px;
  row-rule: 1px solid #e5e7eb;
}

Main content dan sidebar dipisahkan dengan column-rule yang tegas, sementara widgets di sidebar dipisahkan dengan row-rule yang lebih subtle.

Accessibility Considerations untuk Gap Decorations

Gap decorations adalah dekorasi visual, bukan semantic element, jadi tidak perlu ARIA attributes.

Tapi ada beberapa hal yang perlu dipertimbangkan:

Kontras Warna:

Pastikan divider punya kontras yang cukup dengan background. WCAG 2.1 level AA memerlukan contrast ratio minimal 3:1 untuk UI components.

.grid {
  column-rule: 2px solid #6b7280; /* Good contrast with white background */
}

/* Bad - too light */
.grid-bad {
  column-rule: 1px solid #f3f4f6; /* Contrast ratio < 2:1 */
}

Motion Sensitivity:

Kalau menggunakan animated gap decorations, sediakan reduced-motion fallback.

@media (prefers-reduced-motion: reduce) {
  .grid-animated {
    animation: none;
    column-rule: 3px solid #3b82f6; /* Static color */
  }
}

Screen Reader:

Gap decorations tidak diumumkan oleh screen reader (dan memang seharusnya tidak). Kalau divider punya makna semantic (misalnya memisahkan kategori berbeda), gunakan heading atau ARIA landmarks sebagai tambahan.

<div class="category-grid">
  <h2 class="sr-only">Electronics</h2>
  <div class="product">Product 1</div>
  <div class="product">Product 2</div>
  
  <h2 class="sr-only">Clothing</h2>
  <div class="product">Product 3</div>
  <div class="product">Product 4</div>
</div>

Gap decorations seharusnya memperkuat visual hierarchy yang sudah ada, bukan menggantikan semantic structure.

Kesimpulan

CSS Gap Decorations adalah solusi native yang elegan untuk problem lama: bagaimana membuat border dan divider antar grid items tanpa hack yang kumuh.

Dengan column-rule dan row-rule, kita bisa membuat divider yang clean, performant, dan mudah di-maintain.

Browser support di 2026 sudah solid untuk target audience modern, dan fallback strategy yang ada membuat fitur ini safe untuk production.

Kalau project Anda menggunakan CSS Grid (dan seharusnya memang begitu), gap decorations adalah upgrade yang worth it untuk codebase yang lebih semantic dan maintainable.

Saatnya tinggalkan hack margin negatif dan pseudo-element berlapis, dan pakai cara yang benar untuk styling grid layouts.