Grid-Wrapper

Anforderungen

Elemente, die auf dem Grid platziert sind, sollten sich an einem horizontal zentrierten maximal breiten Wrapper oder an den äußeren Rändern des Grids ausrichten können, oder beides.

Rezept

Klicken Sie auf „Play“ in den Codeblöcken unten, 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-minmax()-Funktion, um die Grid-Track-Größen in der grid-template-columns-Eigenschaft zu definieren. Für die zentralen Spalten mit einer maximalen Breite können wir einen Mindestwert von 0 oder höher und einen Höchstwert festlegen, der die maximale Größe angibt, auf die die Spalten-Tracks wachsen können. Die Verwendung von relativen oder absoluten <length>-Einheiten (Pixel, em, rem) wird eine feste maximale Größe für den zentralen Wrapper erstellen, während die Verwendung von <percentage>-Werten oder Viewport-Einheiten verursachen wird, dass der Wrapper wächst oder schrumpft, je nach Kontext.

Die äußeren zwei Spalten haben eine maximale Größe von 1fr, was bedeutet, dass sie jeweils den verbleibenden verfügbaren Raum im Grid-Container ausfü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 einstellen:

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

Barrierefreiheit

Obwohl CSS-Grid es ermöglicht, Elemente überall (im Rahmen des Möglichen) zu positionieren, ist es wichtig, dass Ihr zugrunde liegendes Markup einer logischen Reihenfolge folgt (siehe CSS-Grid-Layout und Barrierefreiheit für mehr Details).

Siehe auch

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