minmax() в Css Grid Layout

Question

У меня возникли некоторые проблемы с функцией minmax(), связанной с компоновкой сетки Css; Вот мой код:

HTML:

<div class="grid"> 
     <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> 

CSS:

 * { 
      box-sizing: border-box; 
     } 

     .grid { 
      display: grid; 
      grid-template-columns : minmax(150px, 250px) 1fr 1fr; 
      grid-gap: 20px; 
     } 

     .grid div { 
      border : 1px solid rgb(0,95,107); 
      border-radius: 3px; 
      background: rgba(0,95,107,0.8); 
      padding: 0.2em; 
      color : #FFF; 
     } 

Когда я использую MinMax() с блоком фр, как указано в моем CSS, ширина сетки дорожек получить максимальное значение , и оставаться в максимальном размере, даже если я уменьшу область просмотра; но когда я использовал его с px следующим образом:

grid-template-columns : minmax(150px, 250px) 200px 200px ; 

Работает так, как ожидалось, я не знаю почему. Тест на: Chrome & Firefox

Answer 1

В коде нет ничего плохого. Это, по-видимому, стандартное поведение minmax в сочетании с столбцами, использующими блок fr, поскольку единица fr не имеет минимального значения (за исключением того, что ширина его содержимого здесь почти пуста - всего одна цифра).

Если есть достаточное пространство экрана, minmax примет максимальное значение.

Если вы должны были увеличить максимальное значение в minmax, а затем отрегулировать окно браузера, вы заметите, что minmax работает, и что, когда на нем не хватает места для максимальной ширины, его ширина будет снижение.