Spaltenlayouts

Es gibt eine Reihe von Designmustern, die Sie mit Ihren Spalten erreichen möchten:

• Ein kontinuierlicher Faden von Inhalten, der in spaltenförmigen Layouts aufgebrochen ist, ähnlich wie in einer Zeitung.
• Eine einzelne Reihe von Elementen, die als Spalten angeordnet sind, wobei alle Höhen gleich sind.
• Mehrere Reihen von Spalten, die nach Reihe und Spalte ausgerichtet sind.

Sie müssen verschiedene Layout-Methoden auswählen, um Ihre Anforderungen zu erfüllen.

Wenn Sie Spalten mit einem Multi-Column-Layout erstellen, bleibt Ihr Text als kontinuierlicher Strom erhalten, der jede Spalte nacheinander füllt. Die Spalten müssen alle die gleiche Größe haben, und Sie können eine einzelne Spalte oder den Inhalt einer einzelnen Spalte nicht gezielt ansprechen.

Sie können die Lücken zwischen den Spalten mit den Eigenschaften column-gap oder gap steuern und eine Regel zwischen den Spalten mit column-rule hinzufügen.

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 Kurzschrift-Eigenschaft columns kann verwendet werden, um die Eigenschaften column-width und column-count festzulegen, wobei eine von beiden die maximale Anzahl von Spalten definieren kann.

Verwenden Sie Multi-Column, wenn:

• Sie Ihren Text in spaltenförmigen Layouts, ähnlich wie in einer Zeitung, darstellen möchten.
• Sie eine Reihe kleiner Elemente haben, die Sie auf Spalten aufteilen möchten.
• Sie keine einzelnen Spaltenboxen für das Styling ansprechen müssen.

Flexbox kann verwendet werden, um Inhalte in Spalten aufzuteilen, indem display: flex; gesetzt wird, um ein Elternelement zu einem Flex-Container zu machen. Allein das Hinzufügen dieser einen Eigenschaft verwandelt alle Kinder (Kindelemente, Pseudo-Elemente und Textknoten) in Flex-Elemente entlang einer einzigen Linie. Das Festlegen der gleichen Kurzschrift-Eigenschaft flex mit einem einzigen numerischen Wert verteilt den gesamten verfügbaren Platz gleichmäßig, sodass alle Flex-Elemente in der Regel die gleiche Größe haben, solange keines ein nicht umbruchfähiges Inhaltselement hat, das das Element größer zwingt.

Ränder oder die gap-Eigenschaft können verwendet werden, um Lücken zwischen Elementen zu schaffen, aber derzeit gibt es keine CSS-Eigenschaft, die Regeln zwischen Flex-Elementen hinzufügt.

Um ein Layout mit Flex-Elementen zu erstellen, die sich auf neue Zeilen umwickeln, setzen Sie die flex-wrap-Eigenschaft am Container auf wrap. Beachten Sie, dass jede Flex-Linie nur für diese Linie Platz verteilt. Elemente in einer Linie werden nicht unbedingt mit Elementen in anderen Linien ausgerichtet, wie Sie im folgenden Beispiel 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:

• Für einzelne Reihen oder Spalten von Elementen.
• Wenn Sie eine Ausrichtung auf der Querachse vornehmen möchten, nachdem Sie Ihre Elemente angeordnet haben.
• Wenn Sie zufrieden damit sind, dass gewrapte Elemente nur den Platz in ihrer Linie teilen und nicht mit Elementen in anderen Linien ausgerichtet werden.

Wenn Sie ein zweidimensionales Raster möchten, bei dem die Elemente sowohl in Reihen als auch in Spalten ausgerichtet sind, sollten Sie das CSS-Grid-Layout wählen. Ähnlich wie Flexbox an den direkten Kindern des Flex-Containers arbeitet, funktioniert das Grid-Layout an den direkten Kindern des Grid-Containers. Setzen Sie einfach display: grid; auf den Container. Eigenschaften, die an diesem Container festgelegt sind — wie grid-template-columns und grid-template-rows — bestimmen, wie die Elemente entlang der Reihen und Spalten verteilt werden.

Verwenden Sie Grid:

• Für mehrere Reihen oder Spalten von Elementen.
• Wenn Sie die Elemente auf den Block- und Inline-Achsen ausrichten möchten.
• Wenn Sie möchten, dass sich Elemente in Reihen und Spalten ausrichten.

• Leitfaden zum Multi-Column-Layout
• Leitfaden zu Flexbox
• Leitfaden zum CSS-Grid-Layout