このページの本文へ

これは便利!CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

2018年04月06日 12時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

CSS Gridで使えるrepeat()関数の「auto-fill」「auto-fit」の違いを理解すると、柔軟なレスポンシブ Webデザインが実現できます。わかりにくい両者の違いをデモで確認しましょう。

CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()minmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。

今回はそのrepeat()で使えるauto-fillauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。

auto-fillとauto-fitの違い

auto-fillauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()auto-fillauto-fitminmax()を使ったデモです。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング