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 auf die automatische Platzierung angewiesen sind und der Grid-Algorithmus zusätzliche Zeilen- oder Spuren tracks erstellen muss, um Grid-Zellen aufzunehmen, werden zusätzliche Spuren im impliziten Grid erstellt. Das implizite Grid ist das Grid, das automatisch erstellt wird, wenn Inhalte 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 implizite Grid-Zeilenspur, die entsteht, weil es mehr als die 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>