Grid-Zelle
In einem CSS-Grid-Layout ist eine Grid-Zelle die kleinste Einheit, die Sie in Ihrem CSS-Grid haben können. Sie ist der Raum zwischen vier sich kreuzenden Gitterlinien und konzeptionell sehr ähnlich einer Tabellenzelle.
Wenn Sie Elemente nicht mit einer der Grid-Platzierungsmethoden platzieren, werden die direkten Kinder des Grid-Containers mithilfe des Auto-Platzierungsalgorithmus je eine in jede einzelne Grid-Zelle platziert. Zusätzliche Zeilen- oder Spalten-Spuren werden erstellt, um genügend Zellen zu schaffen, die alle Elemente aufnehmen.
Beispiel
Im Beispiel haben wir ein Grid mit drei Spuren erstellt. Die fünf Elemente werden in Grid-Zellen entlang einer ersten Zeile von drei Grid-Zellen platziert, dann wird eine neue Zeile für die verbleibenden zwei erstellt.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
}
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>