Grid-Wrapper

Anforderungen

Elemente, die im Grid platziert werden, sollten sich an einem horizontal zentrierten Wrapper mit maximaler Breite oder den Außenkanten des Grids oder beidem ausrichten können.

Rezept

Klicken Sie in den Code-Blöcken unten auf „Play“, 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 mittleren 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 relativer oder absoluter <length>-Einheiten (Pixel, Ems, Rems) wird eine feste maximale Größe für den zentralen Wrapper schaffen, während bei der Verwendung von <percentage>-Werten oder Viewport-Einheiten der Wrapper in Reaktion auf seinen Kontext wächst oder schrumpft.

Die äußeren beiden Spalten haben eine Maximalgröße von 1fr, was bedeutet, dass sie sich jeweils ausdehnen werden, 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 */
}

Barrierefreiheitsanliegen

Obwohl CSS Grid das Positionieren von Elementen an beliebigen (zumindest vernünftigen) Stellen ermöglicht, ist es wichtig sicherzustellen, dass Ihr zugrunde liegendes Markup einer logischen Reihenfolge folgt (siehe CSS-Rasterlayout und Barrierefreiheit für weitere Details).

Siehe auch

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