Spaltenlayouts - CSS | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
View in English Always switch to English
Sie werden oft ein Layout erstellen müssen, das aus mehreren Spalten besteht, und CSS bietet dafür verschiedene Möglichkeiten. Ob Sie Multi-column, Flexbox oder Grid Layout verwenden, hängt davon ab, was Sie erreichen möchten. In diesem Rezept erkunden wir diese Optionen.
Es gibt eine Reihe von Designmustern, die Sie mit Ihren Spalten erreichen möchten:
Sie müssen verschiedene Layoutmethoden wählen, um Ihre Anforderungen zu erfüllen.
Wenn Sie Spalten mit dem Multi-Column Layout erstellen, bleibt Ihr Text als kontinuierlicher Fluss, der jede Spalte nacheinander füllt. Die Spalten müssen alle gleich groß sein, und Sie können keine einzelne Spalte oder den Inhalt einer einzelnen Spalte anvisieren.
Sie können die Abstände zwischen den Spalten mit den Eigenschaften column-gap oder gap steuern und eine Linie zwischen den Spalten mit column-rule hinzufügen.
Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:
In diesem Beispiel haben wir die Eigenschaft column-width verwendet, um eine Mindestbreite festzulegen, die die Spalten haben müssen, bevor der Browser eine zusätzliche Spalte hinzufügt. Die Kurzform-Eigenschaft columns kann verwendet werden, um die Eigenschaften column-width und column-count festzulegen, von denen eine die maximale Anzahl der zulässigen Spalten definieren kann.
Verwenden Sie Multicol, wenn:
Flexbox kann verwendet werden, um Inhalte in Spalten aufzuteilen, indem display: flex; festgelegt wird, um ein übergeordnetes Element zu einem Flex-Container zu machen. Das Hinzufügen dieser einen Eigenschaft verwandelt alle Kinder (untergeordnete Elemente, Pseudoelemente und Textknoten) in Flex-Elemente entlang einer einzigen Linie. Durch das Festlegen der gleichen flex Kurzform-Eigenschaft mit einem einzelnen numerischen Wert wird der gesamte verfügbare Platz gleichmäßig verteilt, was im Allgemeinen alle Flex-Elemente gleich groß macht, solange keines nicht umbrechenden Inhalt hat, der das Element größer zwingt.
Ränder oder die gap Eigenschaft können verwendet werden, um Abstände zwischen den Elementen zu schaffen, aber es gibt derzeit keine CSS-Eigenschaft, die Linien zwischen Flex-Elementen hinzufügt.
Um ein Layout mit Flex-Elementen zu erstellen, das in neue Zeilen umbricht, setzen Sie die Eigenschaft flex-wrap auf dem Container auf wrap. Beachten Sie, dass jede Flex-Linie nur Platz für diese Linie verteilt. Elemente in einer Zeile werden nicht unbedingt mit Elementen in anderen Zeilen ausgerichtet sein, wie Sie im Beispiel unten sehen werden. Dies ist der Grund, warum Flexbox als eindimensional beschrieben wird. Es ist dafür ausgelegt, das Layout als Reihe oder Spalte zu steuern, aber nicht beides gleichzeitig.
Verwenden Sie Flexbox:
Wenn Sie ein zweidimensionales Raster wünschen, bei dem Elemente in Reihen und Spalten ausgerichtet sind, sollten Sie das CSS Grid Layout wählen. Ähnlich wie Flexbox auf die direkten Kinder des Flex-Containers wirkt, arbeitet das Grid Layout auf den direkten Kindern des Grid-Containers. Setzen Sie einfach display: grid; auf dem Container. Auf diesem Container festgelegte Eigenschaften — wie grid-template-columns und grid-template-rows — bestimmen, wie die Elemente entlang der Reihen und Spalten verteilt werden.
Klicken Sie auf "Play" in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:
Der Bauplan für ein besseres Internet.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.