Layout: Grid, Flex, Karten

Jedes Beispiel unten steckt in einem ziehbaren Rahmen (Griff unten rechts) - Breite verändern und live beobachten, wie sich Grid-Spalten, Breiten-Fraktionen und Sichtbarkeit an die BREITE DIESES CONTAINERS anpassen, nicht an die des Browserfensters. Vollständige Referenz: Layout im Handbuch.

Grid: feste Spaltenzahl

.ncss-grid--cols-3 - starr bei 3 Spalten ab 36rem Container-Breite, darunter 1 Spalte. Rahmen schmaler ziehen, um den Umbruch zu sehen:

1

2

3

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

Flex-Grid: unvollständige letzte Zeile zentriert

5 Karten, .ncss-width-1-3 - Zeile 1 zeigt 3, Zeile 2 die restlichen 2, ZENTRIERT statt linksbündig hängend (.ncss-flex-grid--center). Etwas, das .ncss-grid allein nicht kann.

1

2

3

4

5

<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>

Andere Fraktionen, gemischt in einer Zeile (.ncss-width-1-4 + .ncss-width-1-2 + .ncss-width-1-4):

1/4

1/2

1/4

Karten im Flex-Grid

.ncss-width-* und .ncss-card kombiniert - fünf Karten, dieselbe Zentrierung wie oben, jetzt mit echtem Karten-Look (.ncss-border/.ncss-radius-lg/.ncss-shadow-sm, siehe Karten):

Karte 1

Beliebiger Inhalt, gleich hoch wie die Nachbarn dank Flexbox-Stretch.

Karte 2

Kurzer Text.

Karte 3

Ein etwas längerer Absatz, um die Höhenanpassung zu zeigen.

Karte 4

Kurzer Text.

Karte 5

Kurzer Text.

Container-basierte Sichtbarkeit

Zwei Absätze, exakt komplementär - reagieren auf die Breite des umschließenden .ncss-container, nicht des Browserfensters:

Sichtbar AB 36rem Container-Breite

Sichtbar UNTER 36rem Container-Breite

<div class="ncss-container">
  <p class="ncss-hide-below-container-md">Sichtbar ab 36rem</p>
  <p class="ncss-hide-from-container-md">Sichtbar unter 36rem</p>
</div>

Flex-Helfer

.ncss-flex--between - klassische Kopfzeile (Titel links, Aktion rechts):

Titel