Grid
Flexibles Layout-Grid als Ersatz für alle früheren Container-Komponenten (50-50, 25-75 usw.). Basiert auf CSS Grid mit auto-fit: Die Spalten passen sich automatisch an den verfügbaren Platz an – ohne manuelles Breakpoint-Management. Daneben gibt es feste Sidebar-Varianten für Seitenlayouts.
Auto Grid (auto-fit)
Die Spalten werden automatisch so breit wie möglich, ohne das Layout zu sprengen. Auf kleinen Bildschirmen stapeln sich die Elemente untereinander. Kein einziger Breakpoint muss manuell gesetzt werden.
2 Spalten
Typisch für Text-Bild-Kombinationen oder zwei gleichwertige Inhaltsblöcke.
<Grid cols={2}>
<div>Inhalt Spalte 1</div>
<div>Inhalt Spalte 2</div>
</Grid>3 Spalten
Ideal für Feature-Kacheln, Teaser-Grids oder Vorteils-Listen.
<Grid cols={3}>
<div>Feature 1</div>
<div>Feature 2</div>
<div>Feature 3</div>
</Grid>4 Spalten
Für Statistik-Kacheln, Kennzahlen oder Quartals-Uebersichten.
<Grid cols={4}>
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
</Grid>Festes Grid (Sidebar-Layout)
Für klassische Seitenlayouts mit schmalerer Seitenleiste und breitem Hauptinhalt. Die Proportionen sind fest: ca. 280px Sidebar, der Rest für den Hauptbereich. Auf Mobil stapeln sich beide Bereiche.
Sidebar links
<Grid variant="sidebar-left">
<aside>Filteroptionen, Navigation oder Kontaktbox</aside>
<main>Hauptinhalt, z.B. Suchergebnisse oder Artikeltext</main>
</Grid>Sidebar rechts
<Grid variant="sidebar-right">
<main>Artikeltext oder Produktbeschreibung</main>
<aside>Infobox, Kontakt oder verwandte Links</aside>
</Grid>Custom Gap
Der Standard-Abstand zwischen Spalten kann mit dem gap-Prop überschrieben werden – beliebige CSS-Werte sind erlaubt.
Enger Abstand (0.5rem)
<Grid cols={3} gap="0.5rem">
<div>Engerer</div>
<div>Spalten-</div>
<div>Abstand</div>
</Grid>Installation
cp-components add grid