CSS’e Gap Decorations Geldi: Grid ve Flex’te Ayraç Çizgisi Çekmenin Yeni Yolu

Grid veya flex öğelerinin arasına ince bir ayraç çizgisi çekmek istediğinizde ne yaptığınızı biliyoruz: her öğeye border ekleyip, nth-child seçicileriyle son sütun ve son satırdan bu border’ı tek tek kaldırıyorsunuz. Düzen değişince (kolon sayısı, responsive kırılım) bu seçiciler de bozuluyor, yeniden hesaplamanız gerekiyor.

3 Ağustos 2026’da CSS-Tricks’in duyurduğu gap decorations özelliği bu hack’i gereksiz kılıyor: artık row-rule ve column-rule ile ayraç çizgisini konteynerin kendisine tanımlıyorsunuz, öğelere hiç dokunmuyorsunuz.

Gap Decorations Nedir?

Gap decorations, çok sütunlu (multi-column) düzende zaten var olan column-rule özelliğinin grid ve flexbox’a genişletilmiş hali. Yeni gelen temel özellikler:

• column-rule — dikey boşluklara (sütunlar arası) çizgi çizer
• row-rule — yatay boşluklara (satırlar arası) çizgi çizer
• rule — ikisini birden tanımlayan kısaltma
• rule-inset — çizginin öğelerin kenarına ne kadar yaklaşacağını ayarlar
• rule-overlap — çizgilerin kesişim noktalarında nasıl davranacağını belirler
• rule-visibility-items — hangi boşluklarda çizginin görüneceğini kontrol eder

Bunların yanında row-rule-inset-cap, column-rule-inset-junction gibi daha ince ayar sağlayan uzun biçim özellikler de var — çoğu proje için gerekmez, ama karmaşık grid düzenlerinde işe yarıyor.

Eski Yöntem vs Yeni Yöntem

modern-css.com’un verdiği örnek farkı net gösteriyor. Eskiden 3 sütunlu bir grid’de dikey ayraç çizmek için:

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

Bu, kolon sayısı değişirse (3n yerine 4n gerekirse) elle güncellenmesi gereken, responsive kırılımlarda ayrıca yönetilmesi gereken kırılgan bir çözüm. Yeni özellikle aynı sonuç:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-rule: 1px solid var(--border);
}

Kolon sayısı repeat(4, 1fr) olarak değişse bile column-rule satırına dokunmanıza gerek yok — konteyner çizgiyi kendisi, düzene göre çiziyor.

Tarayıcı Desteği: Kimde Çalışıyor, Kimde Çalışmıyor

Burada işin can alıcı kısmı geliyor. Gap decorations şu an Chrome ve Edge 149 ve üzerinde çalışıyor (Chromium tabanlı diğer tarayıcılarda da eşdeğer sürümlerde). Firefox ve Safari’de henüz yok.

Bu yüzden özellik Baseline değil — yani “genel kullanıma hazır, endişelenmeden kullan” durumunda değil. modern-css.com küresel kullanım oranını yaklaşık %40 olarak veriyor. MDN’in kendi dokümantasyonu da bu yazı yayınlandığında henüz tamamlanmamıştı.

Kısacası: bu özelliği bugün production’a hiç fallback’siz koyarsanız, ziyaretçilerinizin yaklaşık yarısı ayraç çizgilerini hiç görmez — sayfa kırılmaz, sadece o görsel detay eksik kalır.

Production’da Nasıl Kullanılır? @supports ile Fallback

İyi haber: column-rule ve row-rule kademeli iyileştirmeye (progressive enhancement) çok uygun. Desteklenmediği yerde sayfa bozulmuyor, sadece çizgi görünmüyor. Bunu @supports ile açıkça yönetebilirsiniz:

/* Herkese: eski yöntemle temel ayraç */
.grid > * {
  border-right: 1px solid var(--border);
}
.grid > *:nth-child(3n) {
  border-right: none;
}

/* Destekleyen tarayıcıda: yeni yönteme geç */
@supports (column-rule: 1px solid) {
  .grid > * {
    border-right: none;
  }
  .grid {
    column-rule: 1px solid var(--border);
  }
}

Bu şekilde Chrome/Edge kullanıcısı yeni, temiz yöntemi alır; Firefox/Safari kullanıcısı da eski yöntemle aynı görsel sonucu görmeye devam eder. Hiç kimse için bir şey bozulmaz.

Ne Zaman Kullanmalısınız?

• Kontrollü ortamlar (şirket içi admin paneli, yalnızca Chrome/Edge’in kullanıldığı bir intranet uygulaması): fallback’e bile gerek kalmadan bugün kullanabilirsiniz.
• Halka açık, geniş kitleye hitap eden siteler: yukarıdaki @supports deseniyle kullanın — Chromium kullanıcıları için kod sadeleşir, diğerleri için görsel sonuç aynı kalır.
• Kritik/marka açısından hassas arayüzler: Baseline’a girmesini (muhtemelen Firefox ve Safari desteği eklendiğinde) bekleyin; MDN dokümantasyonu tamamlanana kadar üretim kararını erteleyin.

Sık Sorulanlar

Gap decorations Firefox’ta çalışıyor mu?

Hayır, bu yazının kaynak tarihi itibarıyla (4 Ağustos 2026) yalnızca Chrome ve Edge 149+ destekliyor. Firefox ve Safari için tarih açıklanmadı.

Eski column-rule ile bu yeni column-rule arasındaki fark ne?

column-rule özelliği zaten multi-column (column-count/columns) düzeninde vardı. Gap decorations bu aynı özelliği grid ve flexbox konteynerlerinde de çalışır hale getiriyor — özellik adı aynı, kapsamı genişledi.

MDN’de resmi dokümantasyon var mı?

Yazı yayınlandığında henüz yoktu; GitHub’da açık bir issue üzerinden takip edilebiliyor.

---

Tasarım ve geliştirme araçlarındaki güncel değişiklikleri takip ediyorsanız Figma’da Neler Değişti? 2026’nın En Önemli 10 Özelliği yazımıza da göz atabilirsiniz.