Gridを使うとグリッドレイアウトの実装が非常にラクにできますが、その中でもrepeat()とminmax()を使うと、カードの繰り返しのようなレスポンシブレイアウトがメディアクエリを使わずに実装できます。今回はrepeat()の中で使えるauto-fillとauto-fitの違いやそれぞれの動きについてまとめておきます。GridはFlexboxと同じように親要素に対して、その子要素がどんなレイアウトになるか指定します。「grid-template-columns」で横方向のレイアウトを指定し、「grid-template-rows」で縦方向のレイアウトを指定します。下記のように、どのサイズでレイアウトを分割するのか指定します。Grid特有の単位で「残りの幅いっぱい」という意味になります。ちなみにfrは「fraction」で「割合」の意味です。.gridの横幅が980pxだった場合、1番左カラムで280px使用して、残りは700pxになります。1frの指定が2つあるので、この場合は均等に分けて350pxが2つのレイアウトになります。要素の幅が変変わってもpx指定した部分は固定で、fr指定の部分は残ったサイズを分けて調整してくれるので、レスポンシブ対応が非常にラクになります。同じサイズのカラムを複数回繰り返すレイアウトの場合、repeat()を使うとシンプルに書けます。最初に繰り返し回数を指定して、そのあとにカラム幅を指定して使います。280px);同じ数字を複数回繰り返すよりもスッキリします。下記のようにカラム幅を複数指定すると、280pxと380pxの指定を3回繰り返すようになります。380px);minmax()の使い方カラム幅が固定だと、柔軟なレスポンシブ対応はできません。そこで便利なのがminmax()です。最大値)を指定すると、要素の幅が変わっても最小値と最大値の間でいい感じに切り替わってくれます。1fr));こうなってくると、今度は繰り返し回数部分も画面サイズに応じて変化したくなってきます。そこで登場するのがauto-fillやauto-fitです。auto-fillとauto-fitの違い下記のコードを用意して動きの違いを確認します。1fr));}横幅を狭めたときの動きに変化はありませんが、横幅が広がったときに挙動が変わってきます。auto-fillauto-fillを使うと、画面サイズを広げていったときに新たに最小値の180px分のスペースが生まれると、そこに新たな空のグリッドを生成します。fill(塗り)なので、グリッドを追加できるようなスペースがあるとどんどん追加していきます。auto-fitauto-fitを使うと、画面サイズを広げていっても新たなグリッドは生成されません。空のグリッドは生成せずに、fit(フィット)するような形で伸びていきます。画面サイズを広げたときの微妙な違いですが、こうした違いを理解しつつ使いこなせると、少ない記述で使い勝手の良いレスポンシブ対応のレイアウトが作れます。マサカズ@31mskz101997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。Webrandum表示設定ダークモードこの機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。システム設定に合わせる。