Grid-Wrapper

Anforderungen

Elemente im Grid sollten entweder an einem horizontal-zentrierten Maximalbreite-Wrapper oder an den äußeren Rändern des Grids oder an beiden ausgerichtet werden können.

Rezept

Klicken Sie auf „Play“ in den untenstehenden Codeblöcken, um das Beispiel im MDN Playground zu bearbeiten:

<div class="grid">
  <div class="wrapper">
    <p>
      This item aligns to a central “wrapper” – columns that have a maximum
      width.
    </p>
  </div>
  <div class="full-width">
    <p>This item aligns to the edge of the grid container.</p>
  </div>
  <div class="left-edge">
    <p>
      This item aligns to the left edge of the grid container and the right edge
      of the wrapper.
    </p>
  </div>
  <div class="right-wrapper">
    <p>This item aligns to the right edge of the “wrapper” columns.</p>
  </div>
</div>

body {
  font: 1.2em sans-serif;
}
.grid {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) repeat(6, minmax(0, 60px)) minmax(
      20px,
      1fr
    );
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 10px;
}

.grid > * {
  border: 2px solid rgb(95 97 110);
  border-radius: 0.5em;
  padding: 20px;
}

.full-width {
  grid-column: 1 / -1;
}

.wrapper {
  grid-column: 2 / -2;
}

.left-edge {
  grid-column: 1 / -2;
}

.right-wrapper {
  grid-column: 4 / -2;
}

Getroffene Entscheidungen

Dieses Rezept verwendet die CSS-Grid-Funktion minmax(), um die Größen der Grid-Tracks in der grid-template-columns-Eigenschaft zu definieren. Für die zentralen Spalten mit einer maximalen Breite können wir einen Minimalwert von 0 oder höher und einen Maximalwert festlegen, der die maximale Größe der Spalten-Tracks spezifiziert. Die Verwendung von relativen oder absoluten <length>-Einheiten (Pixels, Ems, Rems) wird eine feste maximale Größe für den zentralen Wrapper erstellen, während die Verwendung von <percentage>-Werten oder Viewport-Einheiten dazu führen wird, dass der Wrapper in Reaktion auf seinen Kontext wächst oder schrumpft.

Die äußeren beiden Spalten haben eine maximale Größe von 1fr, was bedeutet, dass sie sich jeweils ausdehnen, um den verbleibenden verfügbaren Platz 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:

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

Zugänglichkeitsbedenken

Obwohl das CSS-Grid es ermöglicht, Elemente überall (im Rahmen des Vernünftigen) zu positionieren, ist es wichtig sicherzustellen, dass Ihr zugrunde liegendes Markup einer logischen Ordnung folgt (siehe CSS-Grid-Layout und Barrierefreiheit für weitere Details).

Siehe auch

• grid-template-columns-Eigenschaft
• CSS-Grid-Layout-Modul
• CSS-Grid: Mehr Flexibilität mit minmax() (2018)
• Ausbrechen mit CSS-Grid (2017)