Grid-Wrapper

Anforderungen

Elemente, die auf dem Grid platziert werden, sollten in der Lage sein, sich entweder an einem horizontal zentrierten max-width Wrapper oder an die äußeren Ränder des Grids oder beides auszurichten.

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 größer und einen Höchstwert festlegen, der die maximale Größe angibt, auf die die Spalten-Tracks wachsen werden. Die Verwendung von relativen oder absoluten <length> Einheiten (Pixel, Ems, Rems) erzeugt eine feste maximale Größe für den zentralen Wrapper, während die Verwendung von <percentage> Werten oder Viewport-Einheiten bewirkt, dass der Wrapper sich entsprechend seinem Kontext vergrößert oder verkleinert.

Die äußeren zwei 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 */
}

Barrierefreiheitsbedenken

Obwohl CSS Grid das Positionieren von Elementen fast überall ermöglicht, ist es wichtig, sicherzustellen, 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 erklärt (2017)