CSS条件分岐

例えば比較関数を使ってみる

2021年8月30日

Item 1
Item 2
Item 3
Item 4

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 を利用しなくてもレスポンシブなスタイルを実現することができる。

the prev page Get back to