3

minmax()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;
}
<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 で言及されているようにユニットを使用するminmax()とfr、グリッド トラックの幅が最大値になり、ビューポートを縮小しても最大サイズのままになります。しかし、px次のように使用すると

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

期待どおりに動作しますが、理由はわかりません。

テスト済み: Chrome および Firefox

4

1 に答える 1

3

コードに問題はありません。これは、単位minmaxを使用する列と組み合わせた場合の標準的な動作のようです。これは、単位に最小値がないためです (ただし、コンテンツの幅はほとんど空で、1 桁のみです)。frfr

十分な画面スペースminmaxがある場合、最大値が使用されます。

の最大値を増やしてからminmaxブラウザ ウィンドウを調整すると、それが機能していることに気付くでしょう。minmaxまた、最大幅にするのに十分なスペースがない場合、幅が狭くなります。

于 2016-12-29T11:23:41.547 に答える