minmax()

minmax()を使うと、Media Queries無しでレスポンシブデザインができる。minmax(min, max)は最小（min）以上および最大（max）以下のサイズ範囲を定義、 CSS グリッドで使用される。

<div class="grid-auto-fit">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

.grid-auto-fit {
  display: grid;
  grid-auto-rows: 5em;
  grid-gap: 10px;
  padding: 10px;
  margin: 1em 0 2em;
  overflow: hidden;
}
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-auto-fit > div {
  padding: 10px;
  background: beige;
}

赤字部分について、もし 300px が 1fr より大きい場合は、 minmax(min,max) は 300px として扱われる。auto-fitはアイテムを拡張して、使用可能なスペースを埋めてくれる。そして、Media Queries を利用しなくてもレスポンシブなスタイルを実現することができる。