Um ein CSS Grid definieren zu können verwendet man die grid Value für die {{cssxref("display")}} Property. Man kann Spalten und Reihen mit den {{cssxref("grid-template-rows")}} und {{cssxref("grid-template-columns")}} Propertys definieren.
Das Grid welches man mit den Werten definiert hat, beschreibt das explizite Grid.
Falls man Inhalte ausserhalb des expliziten Grids platziert, so erstellt der Grid Algorithmus zusätzliche Reihen und Spalten {{glossary("grid tracks", "tracks")}} um {{glossary("grid item", "grid items")}} zu beinhalten, denn zusätzliche Tracks sind implizierte Grid Tracks. Das implizierte Grid ist das Grid, welches automatisch erstellt wird, während dem vergrössern des Inhaltes
Im Beispiel unten habe ich ein explitzites Grid von drei Spalten und zwei Reihen erstellt. Die dritte Reihe im Grid ist eine implizierte Grid Reihe, welche automatisch erstellt wurde, da es mehr als sechs Div's hat.
* {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>Eins</div> <div>Zwei</div> <div>Drei</div> <div>Vier</div> <div>Fünf</div> <div>Sechs</div> <div>Sieben</div> <div>Acht</div> </div>
{{ EmbedLiveSample('example', '500', '330') }}