Springen zu:

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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 und 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 tracks 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>

Learn More

Property reference

Further reading

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: janklaeger
Zuletzt aktualisiert von: janklaeger,