Grid

Ein CSS-Grid wird definiert mit dem grid-Wert der display-Eigenschaft; Sie können Spalten und Zeilen in Ihrem Grid mithilfe der Eigenschaften grid-template-rows und grid-template-columns definieren.

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

Wenn Sie Inhalt außerhalb dieses expliziten Grids platzieren oder wenn Sie sich auf die automatische Platzierung verlassen und der Grid-Algorithmus zusätzliche Zeilen- oder Spuren tracks erstellen muss, um grid cells zu halten, dann werden zusätzliche Spuren im impliziten Grid erstellt. Das implizite Grid ist das automatisch erstellte Grid aufgrund von Inhalten, die außerhalb der definierten Spuren hinzugefügt werden.

Im untenstehenden Beispiel habe ich ein explizites Grid mit drei Spalten und zwei Zeilen erstellt. Die dritte Zeile im Grid ist eine Spur des impliziten Grids, die entsteht, weil es mehr als sechs Elemente gibt, die die expliziten Spuren füllen.

* {
  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;
}

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

<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>