CSS Layout Kochbuch
Das CSS Layout Kochbuch zielt darauf ab, Rezepte für häufige Layoutmuster zu sammeln, die Sie möglicherweise in Ihren eigenen Websites implementieren müssen. Neben dem Bereitstellen von Code, den Sie als Ausgangspunkt in Ihren Projekten verwenden können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, 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, sollten Sie sich zuerst unser CSS-Layout-Lernmodul ansehen, da es Ihnen die grundlegenden Kenntnisse vermittelt, die Sie benötigen, um die hier bereitgestellten Rezepte 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 Multi-Column-Layout, Flexbox oder Grid für Ihre Spalten auswählen sollten. | CSS Grid, Multicol, Flexbox |
| Ein Element zentrieren | Wie man ein Element horizontal und vertikal zentriert. | Flexbox, Box Alignment |
| Sticky Footers | Erstellung eines Footers, 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 visuell von den anderen getrennt sind. | Flexbox, margin |
| Breadcrumb Navigation | Erstellung einer Linkliste, die es dem Besucher ermöglicht, durch die Seitenhierarchie zurückzunavigieren. | Flexbox |
| Listen-Gruppen mit Badges | Eine Liste von Elementen mit einem Badge, um eine Anzahl anzuzeigen. | Flexbox, Box Alignment |
| Paginierung | Links zu Seiten mit Inhalten (wie Suchergebnisse). | Flexbox, Box Alignment |
| Karte | Ein Kartenkomponent, das in einem Raster aus Karten angezeigt wird. | Grid Layout |
| Grid Wrapper | Zum Ausrichten von Grid-Inhalten innerhalb eines zentralen Wrappers, während es den Elementen ermöglicht wird, auszubrechen. | 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 beitragen. Sehen Sie sich den Leitfaden zum Hinzufügen von Layout-Kochbuch-Rezepten für ein Template und Richtlinien zum Schreiben Ihres eigenen Beispiels an.