Grid

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

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

Wenn Sie Inhalte außerhalb dieses expliziten Grids platzieren oder wenn Sie sich auf die automatische Platzierung verlassen und der Grid-Algorithmus zusätzliche Tracks für Zeilen oder Spalten erstellen muss, um Grid-Zellen zu enthalten, werden zusätzliche Tracks im impliziten Grid erstellt. Das implizite Grid ist das Grid, das automatisch erstellt wird, 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 im Grid ist ein Track des impliziten Grids, da es mehr als sechs Elemente gibt, die die expliziten Tracks 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>