CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法

レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で

[kentaro-m]

“flex-wrap: wrap”

[h-matsuda88]

grid

[damdom]

“repeat()とminmax()”

[namikuguri]

いい。グリッドレイアウトは float など他のプロパティを活用した場合と違って、レイアウトの指定自体は親要素だけで完結する。また、auto-fit は柔軟なグリッドレイアウトをつくるのに役立つ。