Für viele Jahre, CSS schwimmt waren eine heikle, aber notwendige Komponente bei der Erstellung von Website-Layouts. Wenn Ihr Design mehrere Spalten erforderte, wandten Sie sich an Floats. Das Problem bei dieser Methode ist, dass trotz des unglaublichen Einfallsreichtums, den Webdesigner/-entwickler bei der Erstellung komplexer Websites bewiesen haben Layouts, CSS-Floats waren nie wirklich dafür gedacht, auf diese Weise verwendet zu werden.
Während Floats und CSS-Positionierung sicher noch viele Jahre lang einen Platz im Webdesign haben werden, ist das neuere Layout Techniken wie CSS Grid und Flexbox bieten Webdesignern jetzt neue Möglichkeiten, ihre Site-Layouts zu erstellen. Eine weitere neue Layout-Technik, die viel Potenzial zeigt, ist CSS Multiple Columns.
CSS-Spalten gibt es schon seit einigen Jahren, aber fehlende Unterstützung in älteren Browsern (hauptsächlich ältere Versionen von Internet Explorer) hat viele Webprofis davon abgehalten, diese Stile in ihrer Produktion zu verwenden Arbeit.
Mit dem Ende der Unterstützung für diese älteren Versionen des IE experimentieren einige Webdesigner jetzt mit einem neuen CSS-Layout Optionen, einschließlich CSS-Spalten, und die Feststellung, dass sie mit diesen neuen Ansätzen so viel mehr Kontrolle haben als mit schwimmt.
Die Grundlagen von CSS-Spalten
Wie der Name schon sagt, CSS Multiple Columns (auch bekannt als CSS3 mehrspaltiges Layout) können Sie den Inhalt in eine bestimmte Anzahl von Spalten aufteilen. Die grundlegendsten CSS-Eigenschaften, die Sie verwenden würden, sind:
- Spaltenanzahl
- Spaltenlücke
Für Spaltenanzahl geben Sie die gewünschte Anzahl von Spalten an. Die Spaltenlücke wäre die Rinne oder der Abstand zwischen diesen Spalten. Der Browser übernimmt diese Werte und teilt den Inhalt gleichmäßig in die von Ihnen angegebene Anzahl von Spalten auf.
Ein gängiges Beispiel für CSS mit mehreren Spalten in der Praxis wäre das Aufteilen eines Textinhaltsblocks in mehrere Spalten, ähnlich wie in einem Zeitungsartikel. Angenommen, Sie haben das folgende HTML-Markup (beachten Sie, dass wir zum Beispiel nur den Anfang von ein Absatz, während dieses Markup in der Praxis wahrscheinlich mehrere Absätze mit Inhalten enthält):
Die Überschrift Ihres Artikels.
Stellen Sie sich hier viele Textabsätze vor...
Wenn Sie dann diese CSS-Stile geschrieben haben:
.inhalt {
-moz-Spaltenanzahl: 3;
-Webkit-Spaltenanzahl: 3;
Spaltenanzahl: 3;
-moz-Spaltenlücke: 30px;
-Webkit-Spaltenlücke: 30px;
Spaltenabstand: 30px;
}
Diese CSS-Regel würde die Aufteilung „Inhalt“ in 3 gleiche Spalten mit einem Abstand von 30 Pixeln zwischen ihnen aufteilen. Wenn Sie zwei Spalten anstelle von 3 haben möchten, ändern Sie einfach diesen Wert und der Browser berechnet die neuen Breiten dieser Spalten, um den Inhalt gleichmäßig aufzuteilen. Beachten Sie, dass wir zuerst die Eigenschaften mit dem Hersteller-Präfix verwenden, gefolgt von den Deklarationen ohne Präfix.
So einfach das ist, so ist seine Verwendung für die Website-Nutzung fragwürdig. Ja, Sie können eine Reihe von Inhalten in mehrere Spalten aufteilen, aber dies ist möglicherweise nicht die beste Lektüre Erfahrung für das Web, insbesondere wenn die Höhe dieser Spalten unter die „Falte“ der Bildschirm.
Die Leser müssten dann nach oben und unten scrollen, um den gesamten Inhalt zu lesen. Dennoch ist das Prinzip von CSS-Spalten so einfach, wie Sie hier sehen, und es kann viel mehr tun, als nur den Inhalt einiger Absätze aufzuteilen – es kann tatsächlich für das Layout verwendet werden.
Layout mit CSS-Spalten
Angenommen, Sie haben eine Webseite mit einem Inhaltsbereich mit 3 Inhaltsspalten. Dies ist ein sehr gängiges Website-Layout, und um diese 3 Spalten zu erreichen, würden Sie normalerweise die darin enthaltenen Divisionen verschieben. Mit CSS-Mehrspalten ist es so viel einfacher.
Hier ist ein Beispiel-HTML:
Aus unserem Blog.
Inhalt würde hier gehen…
Kommende Veranstaltungen.
Inhalt würde hier gehen…
Das CSS zum Erstellen dieser mehreren Spalten beginnt mit dem, was Sie zuvor gesehen haben:
.inhalt {
-moz-Spaltenanzahl: 3;
-Webkit-Spaltenanzahl: 3;
Spaltenanzahl: 3;
-moz-Spaltenlücke: 30px;
-Webkit-Spaltenlücke: 30px;
Spaltenabstand: 30px;
}
Die Herausforderung hierbei besteht darin, dass der Browser diesen Inhalt gleichmäßig aufteilen möchte. Wenn also die Inhaltslänge dieser Unterteilungen unterschiedlich ist, teilt dieser Browser tatsächlich den Inhalt einer einzelne Unterteilung, fügen Sie den Anfang einer Spalte hinzu und fahren Sie dann mit einer anderen fort (Sie können dies sehen, indem Sie diesen Code verwenden, um ein Experiment durchzuführen und unterschiedliche Längen von Inhalten in jede einzufügen Einteilung).
Das ist nicht das, was Sie wollen. Sie möchten, dass jede dieser Abteilungen eine eigene Spalte erstellt, und egal wie groß oder klein der Inhalt einer einzelnen Abteilung sein mag, Sie möchten nie, dass sie geteilt wird. Sie können dies erreichen, indem Sie diese eine zusätzliche CSS-Zeile hinzufügen:
.inhalt div {
Anzeige: Inline-Block;
}
Dies erzwingt, dass die Unterteilungen, die sich innerhalb des „Inhalts“ befinden, intakt bleiben, selbst wenn der Browser dies in mehrere Spalten aufteilt. Noch besser, da wir hier keine feste Breite angegeben haben, werden diese Spalten automatisch mit der Größe des Browsers angepasst, was sie zu einer idealen Anwendung für application macht Responsive Websites. Mit diesem "Inline-Block" -Stil ist jede Ihrer 3 Abteilungen eine eigene Inhaltsspalte.
Verwenden der Spaltenbreite
Es gibt neben "Spaltenanzahl" noch eine weitere Eigenschaft, die Sie verwenden können, und je nach Ihren Layoutanforderungen kann es tatsächlich die bessere Wahl für Ihre Website sein. Dies ist "Spaltenbreite". Mit demselben HTML-Markup wie zuvor gezeigt könnten wir dies stattdessen mit unserem CSS tun:
.inhalt {
-moz-Spaltenbreite: 500px;
-Webkit-Spaltenbreite: 500px;
Spaltenbreite: 500px;
-moz-Spaltenlücke: 30px;
-Webkit-Spaltenlücke: 30px;
Spaltenabstand: 30px;
}
.inhalt div {
Anzeige: Inline-Block;
}
Dies funktioniert so, dass der Browser diese „Spaltenbreite“ als Maximalwert dieser Spalte verwendet. Wenn das Browserfenster also weniger als 500 Pixel breit ist, würden diese 3 Unterteilungen in einer einzigen Spalte übereinander erscheinen. Dies ist ein typisches Layout, das für mobile/kleine Bildschirmlayouts verwendet wird.
Wenn die Breite des Browsers groß genug wird, um 2 Spalten zusammen mit den angegebenen Spaltenlücken aufzunehmen, wechselt der Browser automatisch von einem einspaltigen Layout auf zwei Spalten. Erhöhen Sie die Bildschirmbreite weiter und schließlich erhalten Sie ein 3-Spalten-Design, bei dem jede unserer 3 Abteilungen in einer eigenen Spalte angezeigt wird. Auch dies ist eine großartige Möglichkeit, um einige reaktionsschnelle, Mehrgerätefreundlich Layouts, und Sie müssen nicht einmal verwenden Medien-Anfragen um die Layout-Stile zu ändern!
Andere Spalteneigenschaften
Zusätzlich zu den hier behandelten Eigenschaften gibt es auch Eigenschaften für "column-rule", einschließlich Farb-, Stil- und Breitenwerten, mit denen Sie Regeln zwischen Ihren Spalten erstellen können. Diese werden anstelle von Rahmen verwendet, wenn Sie möchten, dass einige Zeilen Ihre Spalten trennen.
Zeit zum Experimentieren
Derzeit wird CSS Multiple Column Layout sehr gut unterstützt. Mit Präfixen könnten über 94 % der Webbenutzer diese Stile sehen, und diese nicht unterstützte Gruppe wäre wirklich nur viel ältere Versionen von Internet Explorer, die sowieso nicht mehr unterstützt werden.
Mit diesem Grad an Unterstützung gibt es jetzt keinen Grund, nicht mit CSS-Spalten zu experimentieren und diese Stile in produktionsbereiten Websites bereitzustellen. Sie können Ihre Experimente mit dem in diesem Artikel vorgestellten HTML und CSS beginnen und mit verschiedenen Werten herumspielen, um herauszufinden, was für die Layoutanforderungen Ihrer Website am besten geeignet ist.