Die minmax-Funktion in CSS-Grids
Es ist sehr praktisch, zusammen mit auto-fill
die Funktion minmax anzugeben,
die einen Bereich für die Spaltenbreite
von einem Minimal- bis zu einem Maximalwert festlegt.
Wenn die Breite des Containers nicht alle
Spalten aufnehmen kann, werden einige von ihnen
in eine neue Zeile verschoben, wobei sich die Spalten in der Zeile
gleichmäßig in ihr verteilen.
Sehen wir uns ein Beispiel an. Um verschiedene Varianten der Spaltenplatzierung zu sehen, ändern Sie die Seitenbreite:
<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, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Schreiben Sie ein Beispiel, das die
Funktionsweise der Funktion minmax demonstriert.
