カードギャラリーレイアウトのCSS Grid実装

3列×複数行のカードギャラリーをCSS Gridで実装。商品一覧やブログ記事一覧に最適なレスポンシブカード配置です。

プレビュー

card-1

card-2

card-3

card-4

card-5

card-6

card-7

card-8

card-9

HTML

<div class="grid-container">
  <div class="item-1">card-1</div>
  <div class="item-2">card-2</div>
  <div class="item-3">card-3</div>
  <div class="item-4">card-4</div>
  <div class="item-5">card-5</div>
  <div class="item-6">card-6</div>
  <div class="item-7">card-7</div>
  <div class="item-8">card-8</div>
  <div class="item-9">card-9</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  height: 500px;
}

.item-1 { grid-area: 1 / 1 / 2 / 2; }
.item-2 { grid-area: 1 / 2 / 2 / 3; }
.item-3 { grid-area: 1 / 3 / 2 / 4; }
.item-4 { grid-area: 2 / 1 / 3 / 2; }
.item-5 { grid-area: 2 / 2 / 3 / 3; }
.item-6 { grid-area: 2 / 3 / 3 / 4; }
.item-7 { grid-area: 3 / 1 / 4 / 2; }
.item-8 { grid-area: 3 / 2 / 4 / 3; }
.item-9 { grid-area: 3 / 3 / 4 / 4; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .grid-container > * {
    grid-area: auto;
  }
}

このレイアウトの解説

カードギャラリーは、grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))のようにauto-fillとminmaxを組み合わせることで、カラム数を画面幅に応じて自動調整できます。固定列数ではなく流動的に折り返すため、レスポンシブ対応が非常にシンプルになります。本プリセットでは3列固定で表示していますが、コード出力時にauto-fillへの変更も容易です。

どんな場面で使う？

ECサイトの商品一覧、ブログの記事一覧、ポートフォリオの作品一覧など、同サイズのカードを均等に並べたい場面で使います。

自分でカスタマイズしたい方へ

列数・行数・Gap・セルの範囲を自由に変更したい場合は、CSS Grid Generatorでドラッグ操作によりオリジナルのグリッドを作成できます。詳しい使い方は使い方ガイドをご覧ください。

ジェネレーターで自分のグリッドを作る →