Grid Layoutで利用できるminmax関数の挙動
CSSのGrid Layoutで利用できるminmax()関数の挙動についてですが、設定する値と画面に表示される結果の相関がいまいちピンとこなかったので、色々試してみました。
なお、動作確認を行ったブラウザはChromeのみです。
目次
- 確認するためのベースのコード
- 確認１
- 確認２（test-itemクラスに「max-width:200px」を設定した場合の表示）
- 利用してみた感想
- 参考リンク
確認するためのベースのコード
とりあえず利用したい状況がレスポンシブでアイテム一覧を表示する時なので、今回は以下のコードをベースにします。
◆HTML
<div class="test-list01">
<div class="test-item"></div>
<div class="test-item"></div>
<div class="test-item"></div>
</div>
◆CSS
.test-list01{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(***, ***));
}
.test-list01 .test-item{
margin:5px;
height:50px;
}
以下、minmax()で指定する値を変えることでどのように表示されるかの確認です。
確認１
◆minmax(180px, 200px)
◆minmax(180px, 1fr)
◆minmax(180px, 50%)
確認２（test-itemクラスに「max-width:200px」を設定した場合の表示）
◆minmax(180px, 200px)
◆minmax(180px, 1fr)
◆minmax(180px, 50%)
利用してみた感想
最初はminmax()なんて関数名からして、単純に最小幅と最大幅を指定したらあとは勝手にやってくれるのだろうと思ったら、ちょっと違っていました。
実現したかった挙動としては、各アイテム（test-item）の最小値～最大値間で幅が伸縮して表示され、メディアクエリで指定した1行に収まるだけのアイテムが左詰めで表示されるというもので、この挙動を実現するためにこれまではflexboxを利用していました。
それが、こちらの記事（CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス）を読んで、もしかしたらもっと簡単にできるかも...と思っていたのですが、使ってみた感じちょっと無理そうですね。
私がGrid Layoutの機能を理解しきれていない可能性は大ですが、とりあえず各ブラウザの対応状況もあるので、一覧系コンテンツのレスポンシブ対応としてGrid Layoutを使用するのはまだ控えておいて、これまで通りflexboxで対応したいと思います。
今度は一覧系コンテンツ以外で色々と試してみたいです。