Grid-Wrapper

Anforderungen

Elemente, die auf das Grid gelegt werden, sollten sich entweder an einem horizontal zentrierten Wrapper mit maximaler Breite oder an den äußeren Rändern des Grids oder an beiden ausrichten können.

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, bis zu der sich die Spaltentracks ausdehnen. Die Verwendung von relativen oder absoluten <length>-Einheiten (Pixel, ems, rems) schafft eine feste Maximalgröße für den zentralen Wrapper, während die Verwendung von <percentage>-Werten oder Viewport-Einheiten dazu führt, dass sich der Wrapper in Abhängigkeit von 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 es ermöglicht, Elemente nahezu überall zu positionieren, 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 (2017)