Grid

Ein CSS-Grid wird mit dem Wert grid der Eigenschaft display definiert. Mit den Eigenschaften grid-template-rows und grid-template-columns können Sie Zeilen und Spalten für Ihr Grid festlegen.

Das Grid, das Sie mit diesen Eigenschaften definieren, wird als explizites Grid bezeichnet.

Wenn Sie Inhalte außerhalb dieses expliziten Grids platzieren oder die automatische Platzierung verwenden und der Grid-Algorithmus zusätzliche Zeilen- oder Spalten-Tracks benötigt, um Grid-Zellen aufzunehmen, werden zusätzliche Tracks im impliziten Grid erstellt. Das implizite Grid ist das Grid, das automatisch entsteht, wenn Inhalte außerhalb der definierten Tracks hinzugefügt werden.

Im folgenden Beispiel habe ich ein explizites Grid mit drei Spalten und zwei Zeilen erstellt. Die dritte Zeile ist ein Track des impliziten Grids. Sie entsteht, weil mehr als sechs Elemente vorhanden sind und die expliziten Tracks nur sechs Elemente aufnehmen.

Beispiel

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

html

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

Siehe auch

Grundkonzepte des Grid-Layouts
Eigenschaftenreferenz:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden