Die Bedeutung von auto-fill in CSS Grids
Um die Größe gleicher Spalten eines Grid-Containers festzulegen,
ist es sehr praktisch, in der Funktion repeat
den Wert auto-fill anzugeben, wodurch sich
unser Container mit gleichartigen Spalten der
gewünschten Breite füllt.
Lassen Sie uns eine Tabelle mit acht Elementen erstellen und
jeder Spalte die gleiche Breite von 200px zuweisen.
Dabei soll der Wert auto-fill automatisch
die benötigte Anzahl an Spalten berechnen:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Stellen Sie die Spaltenbreite auf 200px ein.
Verändern Sie die Breite des Elternelements und
beobachten Sie, wie sich die Anzahl
der Spalten ändert.
