Layout

Wenige, komponierbare Layout-Primitive statt einer Utility-Matrix - helpers/layout.css. Live/interaktiv (Container-Breite per Ziehen verstellbar): Layout-Demo.

Container

Grid: intrinsisch (Standardweg)

.ncss-grid - automatisch responsives Grid ohne Media Queries (repeat(auto-fit, minmax(...))), Mindestbreite pro Spalte per Custom Property parametrisiert. Gleiche Zeilenhöhe passiert automatisch (CSS-Grid-Default):

<div class="ncss-grid" style="--ncss-grid-min: 16rem;">
  <div>Karte 1</div>
  <div>Karte 2</div>
</div>

--ncss-grid-max deckelt zusätzlich das Spaltenwachstum (Default 1fr, unbegrenzt) - gegen absurd breite Spalten bei wenigen Elementen auf sehr breiten Bildschirmen. .ncss-grid--align-start deaktiviert das Zeilen-Stretch, falls Karten unterschiedlicher Höhe NICHT gleich hoch gezogen werden sollen.

Grid: feste Spaltenzahl (Escape Hatch)

Für eine wirklich FESTE, redaktionell gewählte Spaltenzahl statt der automatischen Spaltenzahl von .ncss-grid - .ncss-grid--cols-2/-3/-4/-6, bricht unterhalb der jeweiligen Schwelle auf 1 Spalte um. Braucht einen Vorfahren mit .ncss-container (oder einem anderen Element mit container-name: ncss-container):

<div class="ncss-container">
  <div class="ncss-grid--cols-3">
    <div>1</div><div>2</div><div>3</div>
  </div>
</div>

Ungleich breite Kacheln: Kinder zusätzlich mit .ncss-col-span-2/-3/.ncss-row-span-2/-3 kombinieren (auch für .ncss-bento unten nutzbar). Gemischte Kachelgrößen ganz ohne festes Raster: .ncss-bento (grid-auto-flow: dense, füllt Lücken automatisch). Spaltenbasiertes Fallback-Masonry mit progressivem Enhancement zu echtem zeilentreuem display: grid-lanes, sobald verfügbar: .ncss-masonry.

Flex-Helfer

.ncss-stack/.ncss-cluster (siehe oben) sind bereits fertig kalibrierte Flex-Muster für die zwei häufigsten Fälle (vertikaler Rhythmus/horizontal fließende Gruppe) - .ncss-flex für alles andere.

Flex-Grid mit Breiten-Fraktionen

Für den einen Fall, den .ncss-grid NICHT abdeckt: eine FESTE Spaltenzahl, bei der eine unvollständige letzte Zeile ZENTRIERT statt linksbündig hängen bleiben soll (z.B. 5 Karten - 3 in Zeile 1, 2 in Zeile 2, mittig statt am Rand). CSS Grid kann das nicht (jede Spalte bleibt Teil des festen Rasters) - ein wrappender Flex-Container mit expliziten Kind-Breiten dagegen schon, weil jede Zeile für sich normal fließt:

<div class="ncss-flex-grid ncss-flex-grid--center">
  <div class="ncss-width-1-3">1</div>
  <div class="ncss-width-1-3">2</div>
  <div class="ncss-width-1-3">3</div>
  <div class="ncss-width-1-3">4</div>
  <div class="ncss-width-1-3">5</div>
</div>

.ncss-flex-grid etabliert einen EIGENEN, benannten Container (ncss-flex-grid) - unabhängig davon, ob ein Vorfahre bereits .ncss-container ist. Jede Breiten-Klasse reagiert per @container SELBST auf die Breite von .ncss-flex-grid: EIN Klassenname pro Fraktion, kein "Klasse × Breakpoint"-Raster wie bei UIkit/Tailwind-artigen Systemen üblich - startet immer bei 100% (gestapelt), bis der zur Fraktion passende Schwellenwert erreicht ist (dieselben vier Werte wie bei .ncss-grid--cols-* oben, plus zwei weitere für Fünftel/Sechstel):

.ncss-flex-grid--center zentriert eine unvollständige letzte Zeile (justify-content: center) - der eigentliche Grund für diesen Baustein. Intern per calc() um den gap-Anteil korrigiert (eine reine Prozent-Breite würde bei einem wrappenden Flex-Container mit gap zu früh umbrechen, weil gap NICHT automatisch von einer Prozent-Basis abgezogen wird, anders als bei CSS Grids fr-Einheiten - per echtem Test bestätigt). Kombinierbar mit .ncss-card: jedes .ncss-width-*-Element kann selbst eine Karte sein oder eine umschließen.

Container-basierte Sichtbarkeit

Wie .ncss-hide-below-md/-from-md (fester Viewport-Breakpoint, helpers/visibility.css - siehe Scroll & Sichtbarkeit), aber reagiert auf die Breite des Eltern-.ncss-container, nicht den Viewport - dieselbe Komponente zeigt/versteckt ein Element je nach eigener Spaltenbreite (z.B. Sidebar- vs. Hauptspalten-Variante), unabhängig von der Bildschirmgröße:

<div class="ncss-container">
  <p class="ncss-hide-below-container-md">Nur ab 36rem Container-Breite sichtbar</p>
  <p class="ncss-hide-from-container-md">Nur unter 36rem Container-Breite sichtbar</p>
</div>

Vier Schwellenwerte, dieselben wie überall auf dieser Seite: -sm (24rem), -md (36rem), -lg (48rem), -xl (56rem). Für eine beliebige ANDERE Eigenschaft (nicht nur Sichtbarkeit) bei einer Container-Breite - dieselbe @container ncss-container (min-width: ...)-Technik direkt im eigenen CSS verwenden, siehe Eigene Komponenten erstellen.

Stack & Cluster

Ausbrechen (Bleed)

Varianten, um gezielt aus einem Container auszubrechen: .ncss-bleed-start/-end (einseitig), .ncss-bleed-half-start/-half-end (ab der Mitte), .ncss-bleed-center (symmetrisch um einen festen Betrag, --ncss-bleed-amount).

Siehe auch

Für ganze Landingpage-Abschnitte (nicht nur einzelne Bausteine): Landingpage-Bausteine - Text & Bild (Split), Farbflächen-Sektionen (Tile), transformierendes Akkordeon (Accordion-Split). Für Karten selbst (Header/Body/Footer/Media, horizontal/flush): Karten. Alle container-query-responsiv, kombinierbar mit .ncss-container/.ncss-full-bleed von hier oben.