Функция minmax в CSS гридах
Очень удобно вместе с auto-fill
указывать функцию minmax,
которая задает диапазон ширины столбцов
от минимального до максимального значения.
Если ширина контейнера не вмещает все
столбцы, то их некоторые из них переместятся
на новую строку, при этом столбцы в строке
равномерно распределятся в ней.
Давайте посмотрим на примере. Для того, чтобы увидеть разные варианты размещения столбцов изменяйте ширину страницы:
<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;
}
:
Напишите пример, демонстрирующий
работу функции minmax.