Spalten-Styling

.gap-small {
  column-count: 3;
  column-gap: 10px; /* Eng */
}

.gap-medium {
  column-count: 3;
  column-gap: 40px; /* Mittel (empfohlen) */
}

.gap-large {
  column-count: 3;
  column-gap: 80px; /* Weit */
}

<div class="gap-demo">
<div>
  <div class="gap-label">column-gap: 10px</div>
  <div class="gap-small">
    <p>Ein schmaler Abstand von 10px zwischen den Spalten. Die Spalten rücken eng zusammen, was bei schmalen Containern Platz spart.</p>
    <p>Allerdings wird der Text schwerer lesbar, weil die Spalten kaum voneinander getrennt sind.</p>
  </div>
</div>
<div>
  <div class="gap-label">column-gap: 40px</div>
  <div class="gap-medium">
    <p>Ein mittlerer Abstand von 40px ist ein guter Kompromiss. Die Spalten sind klar getrennt, ohne zu viel Platz zu verschwenden.</p>
    <p>Dieser Wert eignet sich gut für die meisten Layouts mit Fließtext.</p>
  </div>
</div>
<div>
  <div class="gap-label">column-gap: 80px</div>
  <div class="gap-large">
    <p>Ein großer Abstand von 80px gibt dem Layout viel Luft. Das wirkt edel und eignet sich für Magazin-Layouts.</p>
    <p>Auf schmalen Bildschirmen kann so viel Abstand aber problematisch werden.</p>
  </div>
</div>
</div>

.rule-solid {
  column-rule: 1px solid #d1d5db;
}

.rule-dotted {
  column-rule: 2px dotted #7c3aed;
}

.rule-dashed {
  column-rule: 2px dashed #059669;
}

.rule-double {
  column-rule: 4px double #1a56db;
}

<div class="rule-demo">
<div>
  <div class="rule-label">solid</div>
  <div class="rule-solid">
    <p>Eine durchgezogene Linie ist der Klassiker. Dezent und unauffällig, perfekt für Zeitungslayouts und Textspalten.</p>
    <p>Die Linie wird in der Mitte des column-gap gezeichnet und nimmt keinen extra Platz ein.</p>
  </div>
</div>
<div>
  <div class="rule-label">dotted</div>
  <div class="rule-dotted">
    <p>Gepunktete Linien wirken etwas verspielter. Sie eignen sich gut für kreative Layouts oder informelle Inhalte.</p>
    <p>Die Punkte werden gleichmäßig zwischen den Spalten verteilt.</p>
  </div>
</div>
<div>
  <div class="rule-label">dashed</div>
  <div class="rule-dashed">
    <p>Gestrichelte Linien sind ein Mittelweg zwischen solid und dotted. Sie sind auffälliger als durchgezogene Linien, aber nicht so verspielt wie Punkte.</p>
    <p>Gut geeignet für technische Dokumentationen oder Tutorials.</p>
  </div>
</div>
<div>
  <div class="rule-label">double</div>
  <div class="rule-double">
    <p>Doppelte Linien wirken elegant und formell. Sie erinnern an klassische Buchgestaltung und eignen sich für hochwertige Layouts.</p>
    <p>Für double brauchst du mindestens 3px Breite, damit beide Linien sichtbar sind.</p>
  </div>
</div>
</div>

.span-content {
  column-count: 3;
  column-gap: 32px;
  column-rule: 1px solid #e5e7eb;
}

/* Erstreckt sich über alle Spalten */
.span-heading {
  column-span: all;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border-top: 2px solid #1a56db;
  border-bottom: 2px solid #1a56db;
  padding: 16px 0;
}

.span-quote {
  column-span: all;
  font-style: italic;
  text-align: center;
  padding: 12px 24px;
  background: #f5f3ff;
}

<div class="span-demo">
<div class="span-content">
  <p>Dieser Text fließt ganz normal durch die drei Spalten. Die column-span Eigenschaft ermöglicht es dir, einzelne Elemente aus dem Spaltenfluss herauszunehmen.</p>
  <p>Das ist besonders nützlich für Zwischenüberschriften, die den gesamten Textbereich überspannen sollen.</p>
  <h2 class="span-heading">Zwischenüberschrift über alle Spalten</h2>
  <p>Nach der Überschrift fließt der Text wieder normal durch die Spalten weiter. Der Browser verteilt den restlichen Inhalt gleichmäßig.</p>
  <p>Das funktioniert auch mit Zitaten, Bildern oder anderen Elementen, die über die volle Breite gehen sollen.</p>
  <div class="span-quote">„Gutes Design ist so wenig Design wie möglich." (Dieter Rams)</div>
  <p>Auch nach einem Zitat-Block geht der normale Spaltenfluss weiter. column-span: all unterbricht den Fluss, und danach fängt ein neuer Spaltenblock an.</p>
  <p>Du kannst beliebig viele Elemente mit column-span: all ausstatten. Jedes davon erzeugt einen eigenen Umbruch im Layout.</p>
</div>
</div>

/* Gleichmäßige Verteilung (Standard) */
.fill-balance {
  column-count: 3;
  column-fill: balance;
  height: 200px;
}

/* Spalten der Reihe nach füllen */
.fill-auto {
  column-count: 3;
  column-fill: auto;
  height: 200px; /* Feste Höhe erforderlich! */
}

<div class="fill-demo">
<div class="fill-col">
  <div class="fill-label fill-label-balance">column-fill: balance</div>
  <div class="fill-balance">
    <p>Bei balance verteilt der Browser den Inhalt möglichst gleichmäßig auf alle Spalten.</p>
    <p>Das bedeutet: Alle Spalten sind ungefähr gleich hoch.</p>
    <p>Das ist der Standard und meistens das gewünschte Verhalten.</p>
  </div>
</div>
<div class="fill-col">
  <div class="fill-label fill-label-auto">column-fill: auto</div>
  <div class="fill-auto">
    <p>Bei auto füllt der Browser die Spalten der Reihe nach. Erst wenn Spalte 1 voll ist, fließt der Text in Spalte 2.</p>
    <p>Das bedeutet: Die letzte Spalte kann deutlich kürzer sein als die erste.</p>
    <p>Dieser Effekt ist nur bei einer festen Höhe sichtbar.</p>
  </div>
</div>
</div>