CSS Layout Kochbuch
Das CSS Layout Kochbuch zielt darauf ab, Rezepte für gängige Layoutmuster zusammenzustellen, die Sie möglicherweise auf Ihren eigenen Websites implementieren müssen. Neben dem Bereitstellen von Code, den Sie als Ausgangspunkt für Ihre Projekte verwenden können, heben diese Rezepte die unterschiedlichen 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 zunächst unser CSS-Layout Lernmodul ansehen, da dies Ihnen das grundlegende Wissen vermittelt, das Sie benötigen, um die Rezepte hier zu nutzen.
Die Rezepte
| Rezept | Beschreibung | Layoutmethoden |
|---|---|---|
| Media-Objekte | Eine zweispaltige Box mit einem Bild auf der einen Seite und einem beschreibenden Text auf der anderen, z. B. ein Facebook-Post oder Tweet. | CSS Grid, float Fallback, fit-content Größenanpassung |
| Spalten | Wann Sie ein Mehrspalten-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 | Einen Footer erstellen, 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 |
| Brotkrümelnavigation | Eine Liste von Links erstellen, um dem Besucher zu ermöglichen, durch die Seitenhierarchie nach oben zu navigieren. | Flexbox |
| Liste mit Abzeichen | Eine Liste von Elementen mit einem Abzeichen zur Anzeige einer Anzahl. | Flexbox, Box Alignment |
| Seitennummerierung | Links zu Seiten mit Inhalten (wie Suchergebnisse). | Flexbox, Box Alignment |
| Karte | Eine Kartenkomponente, die in einem Kartengitter angezeigt wird. | Grid Layout |
| Grid-Wrapper | Zum Ausrichten von Grid-Inhalten innerhalb eines zentralen Wrappers, der auch ermöglicht, dass Elemente ausbrechen. | CSS Grid |
Ein Rezept beitragen
Wie bei allem auf MDN würden wir uns freuen, wenn Sie ein Rezept im gleichen Format wie oben gezeigt beitragen. Sehen Sie sich die Leitfaden zum Hinzufügen von Layout-Kochbuchrezepten für eine Vorlage und Richtlinien zum Schreiben Ihres eigenen Beispiels an.