EinCSS-Grid wird mit demgrid-Wert derdisplay-Eigenschaft definiert; Sie können Spalten und Zeilen in Ihrem Grid mit den Eigenschaftengrid-template-rows undgrid-template-columns festlegen.

Das mit diesen Eigenschaften definierte Grid wird alsexplizites Grid beschrieben.

Wenn Sie Inhalte außerhalb dieser expliziten Grid platzieren oder wenn Sie auf die automatische Platzierung angewiesen sind und der Grid-Algorithmus zusätzliche Zeilen- oder Spurentracks erstellen muss, umGrid-Zellen zu halten, dann werden zusätzliche Spuren im impliziten Grid erstellt. Dasimplizite Grid ist das Grid, das automatisch entsteht, weil Inhalte außerhalb der definierten Spuren hinzugefügt werden.

Im untenstehenden Beispiel habe ich einexplizites Grid mit drei Spalten und zwei Zeilen erstellt. Diedritte Zeile im Grid ist eineimplizite Grid-Zeilenspur, die entsteht, weil es mehr als sechs Elemente gibt, die die expliziten Spuren füllen.

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

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

<div>  <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
• Eigenschaftsreferenz:
  • grid-template-columns
  • grid-template-rows
  • grid
  • grid-template