The Gap Strikes Back: CSS Gap ist jetzt stylbar

• Bisher konnte man mit der CSS-Eigenschaft gap zwar Abstände erzeugen, den Gap-Bereich selbst zu stylen war jedoch nicht möglich, sodass verschiedene Workarounds (zusätzliche Elemente, Border, Pseudo-Elemente usw.) nötig waren
• Das neue Feature CSS gap decorations ermöglicht es mit Eigenschaften wie row-rule, column-rule usw., direkt Linien (Separatoren) zwischen Layout-Items zu zeichnen
• Dekorationen lassen sich in Grid, Flexbox, Multi-column und bald auch Masonry auf alle wichtigen Layouts anwenden, ohne zusätzliches Markup oder unnötige Elemente, sodass strukturelle und visuelle Verbesserungen allein mit reinem CSS möglich sind
• Verschiedene Styles (Dicke, Farbe, Muster usw.) werden mit Wiederholung/Kombination unterstützt und lassen sich mit repeat(), outset, paint-order usw. präzise steuern
• Derzeit ist es nur mit aktivierter Flag in Chromium-basierten Browsern (Chrome/Edge 139+) nutzbar, während Standardisierung und Erweiterung weiterlaufen

---

Bisherige Grenzen von gap und was sich ändert

• Früher war es schwierig, den gap-Bereich zu stylen, und man musste Border für Separatoren oder künstliche Elemente hinzufügen
• Diese Vorgehensweisen hatten verschiedene Nachteile bei Layout-Größe, Barrierefreiheit und Markup-Komplexität
• Jetzt gibt es den Standard gap decorations, mit dem sich Dekorationen im Abstandbereich (z. B. Linien) mit einfachen CSS-Eigenschaften anwenden lassen

Einführung in CSS gap decorations

• column-rule: Wird bisher in Multi-column verwendet, um vertikale Trennlinien zu zeichnen (z. B. column-rule: 1px solid black;)
• Diese Eigenschaft kann jetzt auch in Flexbox, Grid usw. verwendet werden

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

• row-rule: Ermöglicht das Zeichnen von Separatoren zwischen Zeilen

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

• Mehrere Styles wiederholen/kombinieren: Mit repeat() oder kommagetrennter Schreibweise lassen sich verschiedene Styles mischen

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

• Eigenschaften für präzise Steuerung: Mit row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order usw. lassen sich Position, Kreuzungspunkte und Überlagerungsreihenfolge fein abstimmen

Beispiel: Praktischer Einsatz von gap decorations

• Auf der Beispielseite wird body als Grid definiert, und header/nav/main/footer werden durch gaps getrennt
• Mit row-rule lassen sich Trennlinien mit unterschiedlicher Dicke, Farbe und unterschiedlichem Stil anwenden
• Im nav-Menü werden mit Flexbox und column-rule Linien zwischen den Einträgen gezeichnet
• Im main-Bereich werden Bilder und Text mit Flexbox in einer Masonry-artigen Form angeordnet, während row-rule und column-rule die gitterartige Struktur betonen
• Mit column-rule-outset: 0; usw. lassen sich Start- und Endposition der Linien präzise anpassen

Browser-Support und Aktivierung

• Derzeit ist in Chromium-basierten Browsern wie Chrome/Edge 139+ die Aktivierung einer Flag (about://flags → Experimental Web Platform Features) erforderlich
• Die offizielle Standardisierung läuft noch, Feedback und Experimente sind ausdrücklich erwünscht

Mehr erfahren und Playground

• CSS Gap Decorations Module Level 1 Standardentwurf
• Microsoft Edge Explainer
• Im interaktiven Playground lassen sich verschiedene Dekorationskombinationen visuell ausprobieren
• Vorschläge zu Funktionen, Kompatibilität und Feedback können im Chromium issue tracker eingereicht werden