レスポンシブWebデザインCSSのグリッドを使ったカード型レイアウトCSSのグリッド(grid)機能を使えば、簡単にカード・タイル型のレイアウトを作ることができます。グリッドの指定方法によっては、レスポンシブにも対応させることができるので、PCだけでなくモバイルでも見やすいようにレイアウトすることができます。カード型にアイテムを並べる方法まずは、HTMLでアイテム(要素)を必要な分だけ配置しましょう。</div></div>続いて、配置したアイテムをCSSのグリッドを使って整列させていきます。15px;}例として、300pxのアイテムを3列に並べて表示させる指定をします。gapは、アイテム間の余白をどれだけ取るかという指定になります。DEMO1画面中央に配置するには?先程の指定でカード型にレイアウトすることができましたが、このままでは左端によった状態なので、画面中央に寄せます。center;」と指定をすることで、アイテム全体を中央に寄せることができます。DEMO2repeat関数を使おう先程のカラムの指定で同じ数値を繰り返して指定をする場合には、repeatという関数を使って書き換えることができます。15px;}このようにすることで、300pxのカラムを3回繰り返し行うという指定をすることができます。repeat関数を使うことにより、若干すっきりした書き方ができます。レスポンシブ対応をする方法このままでは、モバイルなどで見たときに画面にきっちり収まって表示されません。そこで、少し指定の仕方を変更して小さい画面でも3列で表示されるようにしていきます。15px;}カラムの値を「300px」としていた箇所を「1fr」という値に変えることで、どのような画面サイズでも3列で表示させることができます。「fr」という単位は各要素をどれくらいの比率で表示させるのかという単位で、この場合は同じ割合で配置させたいので「1fr」と指定をしています。先程の設定でモバイルでも3列表示をすることができましたが、場合によっては3列では見づらくなってしまうこともあります。そこで、画面サイズに合わせてカラム数を変動させて、より柔軟なレイアウトに切り替えていきます。15px;}これまでは、カラムを3回繰り返すとしていたものを「auto-fit」という値に変更して、画面サイズによってカラム数が変わっていくようにします。minmax関数を使って最小値と最大値を決めます。最大値)の形で指定をします。DEMO4これで、レスポンシブなカード型レイアウトを作ることができました。以上が、CSSのグリッドを使ったカード型レイアウトの作成方法となります。Explorerに関しては、gridに対応していないので使用するときは注意をしてください。