CSSのグリッド（grid）機能を使えば、簡単にカード・タイル型のレイアウトを作ることができます。グリッドの指定方法によっては、レスポンシブにも対応させることができるので、PCだけでなくモバイルでも見やすいようにレイアウトすることができます。

カード型にアイテムを並べる方法

まずは、HTMLでアイテム（要素）を必要な分だけ配置しましょう。

<div class="grid">
  <div class="card">
    <img src="画像パス" alt="" />
    <p>テキスト</p>
  </div>
  <div class="card">
    <img src="画像パス" alt="" />
    <p>テキスト</p>
  </div>
</div>

続いて、配置したアイテムをCSSのグリッドを使って整列させていきます。

.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  gap: 15px;
}

例として、300pxのアイテムを3列に並べて表示させる指定をします。gapは、アイテム間の余白をどれだけ取るかという指定になります。

画面中央に配置するには？

先程の指定でカード型にレイアウトすることができましたが、このままでは左端によった状態なので、画面中央に寄せます。

.grid {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  gap: 15px;
  justify-content: center;
}

「justify-content: center;」と指定をすることで、アイテム全体を中央に寄せることができます。

repeat関数を使おう

先程のカラムの指定で同じ数値を繰り返して指定をする場合には、repeatという関数を使って書き換えることができます。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 15px;
}

このようにすることで、300pxのカラムを3回繰り返し行うという指定をすることができます。repeat関数を使うことにより、若干すっきりした書き方ができます。

レスポンシブ対応をする方法

このままでは、モバイルなどで見たときに画面にきっちり収まって表示されません。そこで、少し指定の仕方を変更して小さい画面でも3列で表示されるようにしていきます。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

カラムの値を「300px」としていた箇所を「1fr」という値に変えることで、どのような画面サイズでも3列で表示させることができます。「fr」という単位は各要素をどれくらいの比率で表示させるのかという単位で、この場合は同じ割合で配置させたいので「1fr」と指定をしています。

モバイルでも見やすくする方法

先程の設定でモバイルでも3列表示をすることができましたが、場合によっては3列では見づらくなってしまうこともあります。そこで、画面サイズに合わせてカラム数を変動させて、より柔軟なレイアウトに切り替えていきます。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

これまでは、カラムを3回繰り返すとしていたものを「auto-fit」という値に変更して、画面サイズによってカラム数が変わっていくようにします。また、minmax関数を使って最小値と最大値を決めます。minmax(最小値, 最大値)の形で指定をします。

これで、レスポンシブなカード型レイアウトを作ることができました。

以上が、CSSのグリッドを使ったカード型レイアウトの作成方法となります。
なお、Internet Explorerに関しては、gridに対応していないので使用するときは注意をしてください。

おすすめの記事