カードグリッドとは | バイブコーダーのための名称辞典

カードグリッドとは

複数のカードを格子状に並べるレイアウト。画面幅に応じて列数が自動で変わることが多い。

概要

「カード」を同じ大きさのまま格子状（グリッド）に並べるレイアウトです。商品一覧やブログの記事一覧など、同じ形の情報をたくさん並べたいときによく使われます。CSS Grid の repeat(auto-fill, minmax()) を使うと、画面幅に応じて 1 行に並ぶ列数が自動で変わる（幅が狭いと列数が減る）実装が少ないコードで作れます。

別名

表記ゆれ：カードグリッド、グリッドレイアウト、タイル型レイアウト、カード一覧

「グリッドレイアウト」「タイル型レイアウト」はカード以外の要素を並べる場合にも使われる、より広い言い方です。

AI への伝え方

「カードグリッドで並べて」で通じます。列数を固定にしたいか、画面幅に応じて自動で変えたいかで実装が変わるため、「幅に応じて列数を自動調整して」のように伝えると仕様がぶれません。カード同士の余白（gap）の大きさも伝えておくと安全です。

似たパーツとの違い

並べる 1 枚 1 枚の「カード」自体とは別の、並べ方（レイアウト）を指す言葉です。マス目をそろえずにレンガ状に敷き詰める「メイソンリーレイアウト」や、大きさの異なるマスを組み合わせる「ベントグリッド」とは、すべてのマスを同じ大きさにそろえるかどうかで異なります。

デモ

カード 1
カード 2
カード 3
カード 4
カード 5
カード 6

コード

HTML

<ul class="card-grid-demo">
  <li class="card-grid-demo__card">カード 1</li>
  <li class="card-grid-demo__card">カード 2</li>
  <li class="card-grid-demo__card">カード 3</li>
  <li class="card-grid-demo__card">カード 4</li>
  <li class="card-grid-demo__card">カード 5</li>
  <li class="card-grid-demo__card">カード 6</li>
</ul>

CSS

.card-grid-demo {
  display: grid;
  /* 幅に応じて 1 枚 90px 以上を確保しつつ列数が自動で変わる */
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: sans-serif;
}

.card-grid-demo__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e6e6e6;
  color: #333;
  font-size: 13px;
}