Bordered Grid

Bereiche trennen nur durch 1px-Linien. Die Linien entstehen nicht durch border auf jedem Kind, sondern durch einen farbigen Zwischenraum.

Begriffe

Begriff	Was gemeint ist
Background Gap Trick	Die Technik (Parent malt die Linie, Kinder decken ab)
Bordered / Outline shell	Das Design-Look (Ästhetik)
Gap Decorations	Zukünftiger CSS-Standard (row-rule / column-rule)

In Docs und Code: Background Gap Trick oder Bordered Grid.

Mechanik (gap: 1px + Border-Hintergrund)

1. Parent bekommt die Border-Farbe als Hintergrund.
2. Zwischen den Kindern liegt ein 1px Gap (gap: 1px), oft plus padding: 1px für den äußeren Rand.
3. Jedes Kind hat einen deckenden Hintergrund.
4. Ergebnis: nur die 1px-Lücken sind sichtbar — ein durchgehendes Outline-Grid ohne doppelte Kanten.

.bordered-grid {
  display: grid;
  gap: 1px;
  padding: 1px;
  background: var(--border); /* die „Linie“ */
}

.bordered-grid > * {
  background: var(--background); /* füllt die Zellen */
}

Tailwind-/shadcn-Variante: oft gap-px bg-border am Parent und deckender Surface-BG auf den Kindern.

Warum keine normalen Borders?

Mit border: 1px auf benachbarten Boxen entstehen oft 2px-Nähte (1px + 1px). Die Gap-Technik teilt sich eine Linie — schärfer, leichter, eher Wireframe/CAD.

CSS Gap Decorations

Die native Lösung heißt CSS Gap Decorations (row-rule / column-rule). Sie ersetzt den Background-Gap-Hack — Browser-Support ist noch nicht überall da. Bis dahin bleibt der Trick die Praxis.

Shell-Variante (Docs-Layout)

Für Sidebar/Header reicht oft eine shared edge statt Gap-Grid:

• Sidebar: border-inline-end: 1px
• Header: border-bottom: 1px
• Kein Gap zwischen Spalten (gap: 0)
• Strukturelle Flächen eckig (border-radius: 0)
• Interaktive Elemente (Nav-Pills) dürfen gerundet bleiben

CSS-Schichten und Token-Bridge: CSS Architecture. Shell-Schnittstellen: Shell-Architektur.

Designregeln

Ja	Nein
Eine Border-Farbe überall	Schatten zur Trennung
Shared / Gap-Linien	Doppelte Borders
Eckige Struktur	Abgerundete Layout-Container
Flache Flächen gleicher BG	„Floating Cards“

Kurz: Der Parent malt die Linien, die Kinder decken alles außer 1px ab.

Truths

ID	Wahrheit
T-UI-BORDERED	Trennung über geteilte 1px-Linien, nicht Schatten/Doppelborders
T-PKG-NEON	Consumer-Einstieg: @addxion/neon, nicht @addxion/core
T-PKG-SHELL	Shell = UI-Schicht, nicht bash/zsh
T-TRUTHS-SSOT	Truths-Registry — referenzieren, nicht duplizieren

Für Agents

Scope: Outline-/Border-Layout — Background Gap Trick und Shell shared edges.

• Bereiche mit Gap-Grid oder shared edge trennen — keine Schatten-Karten zur Struktur
• Kein border: 1px auf benachbarten Zellen (2px-Nähte vermeiden)
• Layout-Container eckig; Rundung nur an interaktiven Controls
• Token: Border-Farbe aus Design-System / Semantic (--border bzw. Neon-Äquivalent), nicht Hardcoded Hex