CSS-Layout-Kochbuch
Das CSS-Layout-Kochbuch soll Rezepte für gängige Layoutmuster zusammenbringen, die Sie möglicherweise in Ihren eigenen Websites implementieren 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 in CSS-Layouts sind, möchten Sie möglicherweise zuerst einen Blick auf unser CSS-Layout-Lernmodul werfen, da dies Ihnen die grundlegenden Kenntnisse vermittelt, die Sie benötigen, um die Rezepte hier zu nutzen.
Die Rezepte
| Rezept | Beschreibung | Layout-Methoden |
|---|---|---|
| Medienobjekte | 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 Sie ein mehrspaltiges Layout, Flexbox oder Grid für Ihre Spalten wählen sollten. | CSS-Grid, Multicol, Flexbox |
| Ein Element zentrieren | Wie Sie ein Element horizontal und vertikal zentrieren. | Flexbox, Box-Alignment |
| Sticky-Footer | Ein Footer, der 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 |
| Brotkrumen-Navigation | Eine Liste von Links erstellen, damit der Besucher in der Seitenhierarchie zurück navigieren kann. | Flexbox |
| Listengruppe mit Abzeichen | Eine Liste von Elementen mit einem Abzeichen zur Anzeige einer Zahl. | Flexbox, Box-Alignment |
| Seitennummerierung | Links zu Seiten mit Inhalten (z. B. Suchergebnisse). | Flexbox, Box-Alignment |
| Karte | Eine Kartenkomponente, die in einem Kartenraster angezeigt wird. | Grid-Layout |
| Grid-Wrapper | Um Grid-Inhalte innerhalb eines zentralen Wrappers auszurichten und gleichzeitig Elementen das Ausbrechen zu ermöglichen. | CSS-Grid |
Ein Rezept beitragen
Wie bei allen MDN-Inhalten würden wir uns freuen, wenn Sie ein Rezept im gleichen Format wie die oben gezeigten Rezepte beitragen. Siehe den Leitfaden zum Hinzufügen von Layout-Kochbuch-Rezepten für eine Vorlage und Richtlinien zum Schreiben Ihres eigenen Beispiels.