CSS Layout-Kochbuch
Das CSS Layout-Kochbuch zielt darauf ab, Rezepte für gängige Layoutmuster zusammenzubringen, die Sie möglicherweise in Ihren eigenen Websites implementieren müssen. Neben der Bereitstellung von Code, den Sie als Ausgangspunkt für Ihre Projekte nutzen können, zeigen diese Rezepte die verschiedenen Möglichkeiten, wie Layout-Spezifikationen verwendet werden können, und die Entscheidungen, die Sie als Entwickler treffen können.
Hinweis: Wenn Sie neu im Bereich CSS-Layout sind, möchten Sie sich vielleicht zuerst unser CSS-Layout-Lernmodul ansehen, da es Ihnen die grundlegenden Kenntnisse vermittelt, die Sie benötigen, um die Rezepte hier zu nutzen.
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 Facebook-Post oder Tweet. | CSS Grid, float Fallback, fit-content Größenanpassung |
| Spalten | Wann man ein mehrspaltiges Layout, Flexbox oder Grid für Ihre Spalten wählen sollte. | CSS Grid, Multicol, Flexbox |
| Ein Element zentrieren | Wie man ein Element horizontal und vertikal zentriert. | Flexbox, Box Alignment |
| Sticky Fußzeilen | Eine Fußzeile erstellen, die am unteren Ende des Containers oder Ansichtsfensters sitzt, wenn der Inhalt kürzer ist. | CSS Grid, Flexbox |
| Geteilte Navigation | Ein Navigationsmuster, bei dem einige Links optisch von den anderen getrennt sind. | Flexbox, margin |
| Breadcrumb-Navigation | Eine Liste von Links erstellen, um dem Besucher zu erlauben, in der Seitenhierarchie nach oben zu navigieren. | Flexbox |
| Listen-Gruppe mit Badges | Eine Liste von Elementen mit einem Badge zur Anzeige einer Zählung. | Flexbox, Box Alignment |
| Paginierung | Links zu Inhaltsseiten (wie Suchergebnisse). | Flexbox, Box Alignment |
| Karte | Eine Kartenkomponente, die in einem Raster aus Karten angezeigt wird. | Grid Layout |
| Grid-Wrapper | Zum Ausrichten von Grid-Inhalten innerhalb eines zentralen Wrappers, während gleichzeitig Elemente ausbrechen können. | CSS Grid |
Ein Rezept beisteuern
Wie bei allen Inhalten von MDN würden wir es begrüßen, wenn Sie ein Rezept im gleichen Format wie die oben gezeigten beitragen. Sehen Sie sich den Leitfaden zum Hinzufügen von Layout-Kochbuch-Rezepten an, um eine Vorlage und Richtlinien zum Schreiben Ihres eigenen Beispiels zu erhalten.