CSS-Layout-Kochbuch
Das CSS-Layout-Kochbuch zielt darauf ab, Rezepte für häufige Layout-Muster zusammenzuführen, die Sie möglicherweise in Ihren eigenen Webseiten umsetzen müssen. Zusätzlich zur Bereitstellung von Code, den Sie als Ausgangspunkt in Ihren Projekten verwenden können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen genutzt werden können, und die Entscheidungen, die Sie als Entwickler treffen können.
Hinweis: Wenn Sie neu in der CSS-Layout-Gestaltung sind, möchten Sie vielleicht zuerst einen Blick auf unser CSS-Layout-Lernmodul werfen, da dieses Ihnen das grundlegende Wissen vermittelt, das Sie benötigen, um die hier vorgestellten Rezepte zu nutzen.
Die Rezepte
| Rezept | Beschreibung | Layout-Methoden |
|---|---|---|
| Media objects | Eine zweispaltige Box mit einem Bild auf der einen Seite und beschreibendem Text auf der anderen Seite, z. B. ein Social-Media-Beitrag. | CSS Grid, float Fallback, fit-content Größenanpassung |
| Spalten | Wann man ein Mehrspalten-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 |
| Klebrige Fußzeilen | Erstellen einer Fußzeile, die am unteren Rand des Containers oder Viewports 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 | Erstellen einer Liste von Links, die dem Besucher ermöglichen, durch die Seitenhierarchie nach oben zu navigieren. | Flexbox |
| Listengruppe mit Abzeichen | Eine Liste von Elementen mit einem Abzeichen, das eine Zählung anzeigt. | Flexbox, Box Alignment |
| Seitennummerierung | Links zu Seiteninhalten (wie Suchergebnisse). | Flexbox, Box Alignment |
| Karte | Eine Kartenkomponente, die in einem Raster von Karten angezeigt wird. | Grid-Layout |
| Grid-Wrapper | Zum Ausrichten von Gitterinhalten innerhalb eines zentralen Wrappers, während es den Elementen auch erlaubt, 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 einreichen. Siehe den Leitfaden zum Hinzufügen von Layout-Kochbuch-Rezepten für eine Vorlage und Richtlinien zum Schreiben Ihres eigenen Beispiels.