Grid

Learn More

Um ein CSS Grid definieren zu können verwendet man die grid Value für die display Property. Man kann Spalten und Reihen mit den grid-template-rows (en-US) und grid-template-columns (en-US) 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 tracks (en-US) um 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.

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

Property reference

Further reading