CSS Spalten

.three-columns {
  column-count: 3;
  line-height: 1.6;
}

<div class="columns-demo">
<div class="three-columns">
  <p>CSS Multi-Column-Layout ist eine der einfachsten Methoden, um Text in mehrere Spalten aufzuteilen. Du brauchst nur eine einzige CSS-Eigenschaft auf dem Container.</p>
  <p>Der Browser verteilt den Inhalt automatisch gleichmäßig auf alle Spalten. Wenn eine Spalte voll ist, fließt der Text in die nächste weiter.</p>
  <p>Das funktioniert ähnlich wie in einer Zeitung: Der Text läuft von oben nach unten durch die erste Spalte, dann weiter oben in der zweiten Spalte, und so weiter.</p>
  <p>Besonders praktisch ist das für lange Texte, Definitionen, Aufzählungen oder Glossare, die sonst eine sehr lange Seite erzeugen würden.</p>
</div>
</div>

.responsive-columns {
  column-width: 200px; /* Mindestbreite pro Spalte */
  line-height: 1.6;
}

/* Keine Media Queries nötig!
   Breiter Viewport → mehr Spalten
   Schmaler Viewport → weniger Spalten */

<div class="responsive-demo">
<div class="responsive-columns">
  <p>Mit column-width sagst du dem Browser: Jede Spalte soll mindestens 200px breit sein. Der Browser berechnet dann automatisch, wie viele Spalten in den verfügbaren Platz passen.</p>
  <p>Auf einem breiten Bildschirm bekommst du vielleicht vier oder fünf Spalten, auf einem Smartphone nur eine einzige. Ohne Media Queries, ohne Breakpoints.</p>
  <p>Das macht column-width perfekt für responsive Designs. Du musst dich nicht um verschiedene Bildschirmgrößen kümmern, der Browser erledigt das für dich.</p>
  <p>Probier es aus: Verändere die Breite dieses Containers und beobachte, wie sich die Spaltenanzahl automatisch anpasst.</p>
</div>
</div>

/* Nur Spaltenanzahl */
.text-a {
  columns: 3;
}

/* Nur Mindestbreite */
.text-b {
  columns: 180px;
}

/* Beides: maximal 3 Spalten, mindestens 200px breit */
.text-c {
  columns: 200px 3;
}

<div class="shorthand-demo">
<div>
  <div class="shorthand-label">columns: 3</div>
  <div class="shorthand-a">
    <p>Genau 3 Spalten, egal wie breit der Container ist. Der Browser teilt den Platz gleichmäßig auf.</p>
    <p>Das entspricht column-count: 3 und column-width: auto.</p>
  </div>
</div>
<div>
  <div class="shorthand-label">columns: 180px</div>
  <div class="shorthand-b">
    <p>Mindestens 180px pro Spalte. Der Browser entscheidet, wie viele Spalten reinpassen.</p>
    <p>Das entspricht column-width: 180px und column-count: auto.</p>
  </div>
</div>
<div>
  <div class="shorthand-label">columns: 200px 3</div>
  <div class="shorthand-c">
    <p>Maximal 3 Spalten, aber jede mindestens 200px breit. Wenn der Container zu schmal ist, werden es weniger Spalten.</p>
    <p>Das ist die flexibelste Variante: Du bekommst nie mehr als 3 Spalten, aber auf kleinen Bildschirmen werden es automatisch weniger.</p>
  </div>
</div>
</div>

.newspaper-body {
  column-count: 3;
  column-gap: 28px;
  column-rule: 1px solid #d1d5db;
  line-height: 1.7;
  text-align: justify;
}

/* Initiale (großer Anfangsbuchstabe) */
.newspaper-body p:first-child::first-letter {
  font-size: 3.2em;
  font-weight: 700;
  float: left;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 0;
}

<div class="newspaper">
<h1 class="newspaper-title">Die Magie der CSS-Spalten</h1>
<p class="newspaper-subtitle">Von der Webseite zum Zeitungslayout in wenigen Zeilen Code</p>
<hr class="newspaper-divider">
<div class="newspaper-body">
  <p>Mehrspaltige Layouts haben eine lange Tradition in der Typografie. Seit Jahrhunderten verwenden Zeitungen, Magazine und Bücher mehrere Spalten, um Text lesbarer zu machen und den Platz auf der Seite optimal zu nutzen.</p>
  <p>Mit CSS Multi-Column-Layout bringst du dieses bewährte Konzept ins Web. Der Browser übernimmt die gesamte Arbeit: Er berechnet die Spaltenbreite, verteilt den Text gleichmäßig und sorgt für saubere Umbrüche.</p>
  <p>Anders als bei Flexbox oder Grid brauchst du keine zusätzlichen Container oder Wrapper-Elemente. Ein einziges column-count auf dem Textblock reicht aus, und der Inhalt fließt automatisch von Spalte zu Spalte.</p>
  <p>Besonders elegant wird es mit column-rule: Eine dezente Linie zwischen den Spalten verstärkt den Zeitungs-Charakter und hilft dem Auge, die Spalten voneinander zu unterscheiden. Kombiniert mit der richtigen Typografie entsteht ein professionelles Drucklayout.</p>
</div>
</div>