CSS Layout-Kochbuch
Das CSS Layout-Kochbuch zielt darauf ab, Rezepte für gängige Layoutmuster zusammenzubringen, die Sie möglicherweise auf Ihren eigenen Websites umsetzen müssen. Zusätzlich zur Bereitstellung von Code, den Sie als Ausgangspunkt für Ihre Projekte verwenden können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen verwendet werden können und welche Entscheidungen Sie als Entwickler treffen können.
Hinweis: Wenn Sie neu im Bereich CSS-Layout sind, möchten Sie vielleicht zuerst unser CSS-Layout-Lernmodul ansehen, da dies Ihnen die grundlegenden Kenntnisse vermittelt, die Sie benötigen, um die hier vorgestellten Rezepte nutzen zu können.
Die Rezepte
| Rezept | Beschreibung | Layout-Methoden |
|---|---|---|
| Media-Objekte | Eine zweispaltige Box mit einem Bild auf der einen Seite und beschreibendem Text auf der anderen, z. B. ein Social-Media-Beitrag. | CSS Grid, float Fallback, fit-content Größenanpassung |
| Spalten | Wann man sich für ein mehrspaltiges Layout, Flexbox oder Grid für Ihre Spalten entscheiden sollte. | CSS Grid, Multicol, Flexbox |
| Ein Element zentrieren | Wie man ein Element horizontal und vertikal zentriert. | Flexbox, Box Alignment |
| Klebende Fußzeilen | Erstellen einer Fußzeile, die am unteren Rand des Containers oder Viewport sitzt, wenn der Inhalt kürzer ist. | CSS Grid, Flexbox |
| Geteilte Navigation | Ein Navigationsmuster, bei dem einige Links visuell von den anderen getrennt sind. | Flexbox, margin |
| Brotkrumennavigation | Erstellen einer Liste von Links, die es dem Besucher ermöglicht, in der Seitenhierarchie zurück zu navigieren. | Flexbox |
| Listen-Gruppe mit Abzeichen | Eine Liste von Elementen mit einem Abzeichen, um eine Zählung anzuzeigen. | Flexbox, Box Alignment |
| Paginierung | Links zu Inhaltsseiten (wie z. B. Suchergebnisse). | Flexbox, Box Alignment |
| Karte | Eine Kartenkomponente, die in einem Raster von Karten angezeigt wird. | Grid Layout |
| Grid Wrapper | Zum Ausrichten von Grid-Inhalten innerhalb eines zentralen Wrappers, der es Objekten auch ermöglicht auszubrechen. | CSS Grid |
Ein Rezept beitragen
Wie bei allen Inhalten auf MDN würden wir uns freuen, wenn Sie ein Rezept im gleichen Format wie die oben gezeigten beisteuern. Sehen Sie sich die Leitfaden zum Hinzufügen von Layout-Kochbuch-Rezepten für eine Vorlage und Richtlinien zum Schreiben Ihres eigenen Beispiels an.