CSS - Mehrspalten-Aufteilung

Hallo, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt der CSS-Mehrspalten-Aufteilungen ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf dieser Reise mit vielen Beispielen und Erklärungen zu führen. Also, lasst uns loslegen!

Einführung in die Mehrspalten-Aufteilung

Stell dir vor, du liest eine Zeitung. Bemerkst du, wie der Text in ordentliche Spalten organisiert ist? Genau das werden wir mit CSS erreichen, aber auf Webseiten! Mehrspalten-Aufteilungen ermöglichen es uns, visuell ansprechende und leicht lesbare Inhaltsstrukturen zu erstellen.

CSS Mehrspalten-Aufteilung - Dreispalten-Aufteilung

Lassen wir mit einer grundlegenden Dreispalten-Aufteilung beginnen. Dies ist perfekt für die Erstellung von Magazin-Stil-Inhalten oder die Organisation von Informationen auf einer Webseite.

<div class="three-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

In diesem Beispiel verwenden wir die Eigenschaft column-count, um anzugeben, dass wir drei Spalten möchten. Die Eigenschaft column-gap setzt den Abstand zwischen jeder Spalte.

CSS Mehrspalten-Aufteilung - Einstellung der Spaltenbreite

Manchmal möchte man anstatt der Angabe der Anzahl der Spalten eine spezifische Breite für jede Spalte festlegen. Lassen Sie uns sehen, wie das funktioniert:

<div class="flexible-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.flexible-columns {
column-width: 200px;
}

Hier verwenden wir column-width, um jede Spalte auf 200 Pixel Breite einzustellen. Der Browser erstellt so viele Spalten, wie er bei Beibehaltung dieser Breite einpassen kann.

CSS Mehrspalten-Aufteilung - Gestaltung der Spalten

Nun fügen wir unseren Spalten etwas Stil hinzu. Wir können Ränder hinzufügen, Hintergrundfarben ändern und mehr!

<div class="styled-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

In diesem Beispiel verwenden wir column-rule als Kurzform-Eigenschaft, um eine gepunktete Linie zwischen den Spalten hinzuzufügen. Wir können diese Eigenschaften auch einzeln mit column-rule-style, column-rule-width und column-rule-color festlegen.

CSS Mehrspalten-Aufteilung - Überquerende Spalten

Manchmal möchte man, dass ein Inhalt über mehrere Spalten extends. Lassen wir sehen, wie wir das erreichen können:

<div class="spanning-columns">
<h2>Dieser Titel extends über alle Spalten</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">Dieser Absatz extends über zwei Spalten. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

Hier verwenden wir column-span: all, um den Titel über alle Spalten zu extenden, und column-span: 2, um einen Absatz über zwei Spalten zu extenden.

CSS Mehrspalten-Aufteilung - Spalten und Fragmentierung

Fragmentierung bezieht sich darauf, wie Inhalt über Spalten aufgeteilt wird. Lassen wir uns ansehen, wie wir das steuern können:

<div class="fragmented-columns">
<h3>Kapitel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Kapitel 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

In diesem Beispiel verwenden wir break-after: column, um sicherzustellen, dass jeder Kapiteltitel an der Oberseite einer neuen Spalte beginnt.

Verwandte Eigenschaften

Lassen Sie uns alle Eigenschaften, die wir gelernt haben, in einer praktischen Tabelle zusammenfassen:

Eigenschaft	Beschreibung
column-count	Gibt die Anzahl der Spalten an
column-width	Setzt die Breite jeder Spalte
column-gap	Definiert den Abstand zwischen Spalten
column-rule	Kurzform für das Einstellen einer Linie zwischen Spalten
column-rule-style	Setzt den Stil der Spaltenlinie
column-rule-width	Setzt die Breite der Spaltenlinie
column-rule-color	Setzt die Farbe der Spaltenlinie
column-span	Ermöglicht das Extendieren eines Elements über Spalten
break-after	Steuert den Spaltenbruch nach einem Element

Und das war's, Leute! Wir haben die Welt der CSS-Mehrspalten-Aufteilungen bereist. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, mit diesen Eigenschaften zu experimentieren. Wer weiß? Vielleicht erstellen Sie die nächste große Magazin-Style-Website!

Wie mein alter Professor immer sagte: "CSS ist wie Kochen. Zuerst machen Sie vielleicht einen Schmutz, aber mit Übung werden Sie in kürzester Zeit Meisterwerke schaffen!" Also weiter codieren, weiter lernen und vor allem: Viel Spaß dabei!

Credits: Image by storyset