Cssグリッドレイアウトのminmax（）

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; 
     } 

私のCSSで述べたように、私はFRユニットとMINMAX（）を使用すると、グリッド・トラックの幅が最大値を取得します、ビューポートを縮小しても最大サイズに留まります。期待どおりに動作します

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

を次のように私はPXでそれを使用するときには、私は理由を知りません。 試験：Chrome & Firefox

Answer 1

コードに問題はありません。これは、fr単位には最小値がないため（ここではほとんど空ではなくちょうど1桁の内容の幅を除く）、fr単位を使用する列と組み合わせた場合のminmaxの標準的な動作のようです。

十分なスクリーンスペースがある場合、minmaxが最大値を占めます。

minmaxで最大値を大きくしてブラウザウィンドウを調整すると、minmaxが機能していることと、最大幅になるための十分なスペースがない場合、幅がになることがわかりますが減少します。