CP Registry

Grid & Layout

Zwei Systeme arbeiten zusammen: das Content Grid kontrolliert Inhaltsbreiten, das Auto Grid verteilt Elemente in Spalten. Keine festen Container-Components mehr — ein System für alle Layouts.

Content Grid

Jede Seite nutzt ein Content Grid mit 5 Breitenstufen. Inhalte wählen per CSS-Klasse ihre maximale Breite. Das Padding links/rechts passt sich automatisch an.

0 100%
Standard — max. 55rem (880px)

Für Fließtext · optimale Zeilenlänge

.breakout — max. 68.75rem (1100px)

Für Card-Grids und Formulare

.wide-content — max. 83.125rem (1330px)

Für Navigationen und breite Layouts

.full-width — 100% Breite

Für Hero-Bilder und randlose Sections

Die Balken zeigen die tatsaechliche maximale Breite jeder Stufe. Auf schmalen Viewports werden alle gleich breit (100%), weil keine der Stufen ihre Maximalbreite erreicht.

Verschachtelung: .full-width startet das Grid neu

Die CSS-Regeln für die Breitenstufen gelten sowohl für direkte Kinder von .content-grid als auch von .full-width. Dadurch kannst du in einem Full-Width-Block (z.B. einem Hero mit Vollbild-Hintergrund) wieder alle Stufen verwenden — das System beginnt von vorn.

.full-width (100%)

Der äußere Container ist 100% breit — z.B. für ein Hero-Bild. Im Inneren greift wieder das Content-Grid:

Standard in .full-width — 55rem

z.B. Headline und Intro-Text im Hero

.breakout in .full-width — 68.75rem

z.B. Card-Grid im Hero

.wide-content in .full-width — 83.125rem

z.B. breite Navigation im Hero

Beispiel: Hero mit Vollbild-Hintergrund und zentriertem Text

<main class="content-grid">
  <div class="full-width">          
    <div>Headline (55rem zentriert)</div>
    <div class="breakout">Card-Reihe (68.75rem)</div>
    <div class="wide-content">Breite Navigation (83.125rem)</div>
  </div>
</main>

Gut zu wissen: Das CSS ist .content-grid > *, .full-width > * — ein Selektor für beide Elternkontexte. Deshalb verhalten sie sich identisch.

Verwendung im HTML

<main class="content-grid">
  <div>Standard-Breite (55rem)</div>
  <div class="breakout">Breiter (68.75rem)</div>
  <div class="wide-content">Noch breiter (83.125rem)</div>
  <div class="full-width">Volle Breite</div>
</main>

Auto Grid

Das Auto Grid ersetzt alle festen Container-Components (Container-50-50, Container-25-75 usw.) durch ein einziges System. Die Spalten passen sich automatisch an die verfügbare Breite an — kein Breakpoint-Chaos.

2 Spalten (data-cols="2")

Minimum 22rem pro Spalte. Bricht auf 1 Spalte um, wenn der Platz nicht reicht.

Spalte 1
Spalte 2

3 Spalten (data-cols="3")

Minimum 18rem pro Spalte.

Spalte 1
Spalte 2
Spalte 3

4 Spalten (data-cols="4")

Minimum 14rem pro Spalte.

1
2
3
4

Fixed Grid (Sidebar Layouts)

Wenn exakte Spaltenverhältnisse nötig sind (z.B. Sidebar + Content), gibt es das Fixed Grid:

Sidebar Links

Sidebar (1fr)
Hauptinhalt (3fr)

Sidebar Rechts

Hauptinhalt (3fr)
Sidebar (1fr)

Wie Auto Grid funktioniert

.auto-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--grid-min, 18rem), 100%), 1fr)
  );
  gap: var(--grid-gap, 2rem);
}

/* data-cols setzt nur die Mindestbreite: */
.auto-grid[data-cols="2"] { --grid-min: 22rem; }
.auto-grid[data-cols="3"] { --grid-min: 18rem; }
.auto-grid[data-cols="4"] { --grid-min: 14rem; }

Das min() stellt sicher, dass es auch auf kleinen Screens funktioniert (100% Fallback). auto-fit verteilt den Platz automatisch.