# Функция 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`.

← →
↑