1. カードグリッドのギャラリーとは？

カードグリッドのギャラリーとは、画像やタイトル、説明などを「カード形式」で整然と並べたレイアウトのことです。商品一覧、写真ギャラリー、ブログの一覧ページなどでよく使われます。

Bootstrapにはカードコンポーネントとグリッドシステムが標準で用意されているので、初心者でもHTMLとクラス指定だけで見た目が整ったデザインを作成できます。

2. gapとは？スペースの調整が簡単にできる！

gap（ギャップ）は、カード同士の「すき間」を設定するためのプロパティです。Bootstrapではg-3やg-4などのクラスを使うだけで、簡単に余白を設定できます。

たとえばg-4なら、上下左右に1.5rem（24px）の隙間を自動でつけてくれます。これでごちゃごちゃせず、すっきりと見やすいギャラリーが完成します。

3. 等高カラムとは？高さが揃ったカードを作る方法

カードの中に書く内容が少ないと、カードの高さがバラバラになります。そうすると、見た目がガタガタして統一感がありません。

Bootstrapでは、h-100やd-flex flex-columnといったクラスを使って、カードの高さを揃える（等高にする）ことができます。高さを統一することで、デザインに安定感が生まれます。

4. カードグリッドのギャラリーテンプレートを作ってみよう

それでは、カードをグリッド状に並べ、gapと等高カラムも実装したスターターテンプレートを紹介します。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カードグリッドのギャラリー</title>
  <meta name="description" content="Bootstrapのカードとグリッドを使ってギャラリーテンプレートを作る方法。gapや等高カラムで初心者でも整ったレイアウトが簡単に実装できます。">
  <meta name="keywords" content="Bootstrap, ギャラリー, カードグリッド, gap, 等高カラム, HTML初心者, レイアウト, テンプレート">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h1 class="mb-4 text-center">カードギャラリー</h1>
    <div class="row row-cols-1 row-cols-md-3 g-4">
      <div class="col">
        <div class="card h-100 d-flex flex-column">
          <img src="/img/top/rank01.jpg" class="card-img-top" alt="サンプル画像1">
          <div class="card-body">
            <h5 class="card-title">タイトル1</h5>
            <p class="card-text">短めの説明文が入ります。</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary w-100">詳細を見る</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 d-flex flex-column">
          <img src="/img/top/rank02.jpg" class="card-img-top" alt="サンプル画像2">
          <div class="card-body">
            <h5 class="card-title">タイトル2</h5>
            <p class="card-text">こちらは少し長めの説明文です。内容が多くても高さが揃います。</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary w-100">詳細を見る</a>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100 d-flex flex-column">
          <img src="/img/top/rank03.jpg" class="card-img-top" alt="サンプル画像3">
          <div class="card-body">
            <h5 class="card-title">タイトル3</h5>
            <p class="card-text">中ぐらいの説明文です。バランスの良い見た目です。</p>
          </div>
          <div class="card-footer">
            <a href="#" class="btn btn-primary w-100">詳細を見る</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ブラウザ表示