Funcția minmax în grid-urile CSS
Este foarte convenabil să specificăm funcția minmax
împreună cu auto-fill,
care stabilește intervalul lățimii coloanelor
de la valoarea minimă până la cea maximă.
Dacă lățimea containerului nu poate găzdui toate
coloanele, atunci unele dintre ele se vor muta
pe un rând nou, iar coloanele de pe rând
se vor distribui uniform pe acesta.
Să ne uităm la un exemplu. Pentru a vedea diferite variante de plasare a coloanelor schimbați lățimea paginii:
<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;
}
:
Scrieți un exemplu care demonstrează
funcționarea funcției minmax.
