Grid wrapper

Das Grid-Wrapper-Muster ist nützlich, um Grid-Inhalte innerhalb eines zentralen Wrappers auszurichten, während es gleichzeitig ermöglicht, dass Elemente ausbrechen und sich an den Rand des enthaltenden Elements oder der Seite ausrichten.

Anforderungen

Elemente, die im Grid platziert sind, sollten sich entweder an einem horizontal zentrierten max-width Wrapper, den äußeren Rändern des Grids oder beidem ausrichten können.

Rezept

Laden Sie dieses Beispiel herunter

Getroffene Entscheidungen

Dieses Rezept verwendet die CSS-Grid-Funktion minmax(), um die Grid-Track-Größen in der Eigenschaft grid-template-columns zu definieren. Für die zentralen Spalten mit einer maximalen Breite können wir einen Mindestwert von 0 oder größer und einen Maximalwert festlegen, der die maximale Größe angibt, zu der die Spalten-Tracks wachsen werden. Die Verwendung von relativen oder absoluten <length> Einheiten (Pixel, ems, rems) wird eine feste Maximalgröße für den zentralen Wrapper schaffen, während die Verwendung von <percentage> Werten oder Viewport-Einheiten dazu führt, dass der Wrapper entsprechend seinem Kontext wächst oder schrumpft.

Die äußeren zwei Spalten haben eine maximale Größe von 1fr, was bedeutet, dass sie jeweils expandieren, um den verbleibenden verfügbaren Raum im Grid-Container auszufüllen.

Nützliche Fallbacks oder alternative Methoden

Um das Grid horizontal auf der Seite zu zentrieren, können Sie eine max-width zusammen mit linken und rechten auto margins setzen:

css
.grid {
  max-width: 96vw; /* Limits the width to 96% of the width of the viewport */
  margin: 0 auto; /* horizontally centers the container */
}

Barrierefreiheitsbedenken

Obwohl CSS Grid das Positionieren von Elementen an nahezu jeder Stelle ermöglicht, ist es wichtig, dass Ihr zugrunde liegendes Markup einer logischen Reihenfolge folgt (siehe CSS Grid Layout und Barrierefreiheit für mehr Details).

Siehe auch