auto-fitを使う手順

コンテンツの入れ替えが必要な場合はmedia queriesを利用するのが一般的ですが、ブログの記事一覧のようにグリッドアイテムの順番を変える必要がない場合は、media queriesを使わずにレイアウトを整えることも可能です。

これを実現するには、グリッドコンテナの「grid-template-columns」プロパティに、「repeat(auto-fit, [ブレイクポイント])」を指定します。この場合、「repeat」関数でブレイクポイントを複数指定しているので、例えばブレイクポイントに10emを指定すれば、10em・20em・30em…と増えていきますが、ブレイクポイントを1箇所だけにしたい場合は「repeat」関数を取り外します。

grid {
　　display: grid;
　　grid-template-columns: repeat(auto-fit, 10em);
}

これで、10emの倍数をブレイクポイントとして、幅が変わるごとにコンテンツの数が変わります。

autofil.gif

media queries内でコンテンツを流していく方法は、ある程度「固定」されたレイアウトとなりますが、auto-fitはリキッドレイアウトに近いと言えます。どちらがいいということではなく、適材適所で臨機応変に使い分けていただくとよいでしょう。

まとめ

CSSグリッドに関するプロパティは少し長いので、非常に面倒に感じるかもしれません。しかし、レスポンシブデザインへの対応は非常に簡単であることがご理解いただけたでしょう。

一時期flexboxも流行しましたが、CSSグリッドはflexboxの持つ課題も解決しているので、今後のCSSグリッドはWebデザイナーの必須技術となります。仕組みを理解して、デザインに活かしていきましょう。