CSS入門 #4 - Gridでカード一覧を作る

入門 | 12分 で読める | 2026.07.12

公式ドキュメント
CSS

今回やること

CSS Gridは、行と列でレイアウトを作るためのCSSです。

カード一覧やギャラリーのように、同じ形の要素を並べる場面ではGridが使いやすいです。

今回は学習カード一覧をGridで作ります。

Gridの基本

親要素に display: grid を指定します。

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

1fr は「使える幅を1等分する」という意味です。上の例では3列になります。

HTMLを用意する

<section>
  <h2>学習ロードマップ</h2>

  <div class="card-grid">
    <article class="card">
      <h3>HTML</h3>
      <p>ページの構造を作る。</p>
    </article>
    <article class="card">
      <h3>CSS</h3>
      <p>見た目を整える。</p>
    </article>
    <article class="card">
      <h3>JavaScript</h3>
      <p>動きを付ける。</p>
    </article>
  </div>
</section>

カードを整える

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #ffffff;
}

.card h3 {
  margin-top: 0;
}

.card h3 は、cardの中にある h3 にだけ当てる指定です。

自動で列数を調整する

画面幅に合わせて列数を変えるには、repeat と minmax を使います。

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

この指定では、カードが最低 220px を保ちながら、入る分だけ横に並びます。

Flexboxとの使い分け

目的向いているCSS
メニューを横並びにするFlexbox
ロゴとナビを左右に分けるFlexbox
同じ形のカードを一覧にするGrid
行と列を意識して配置するGrid

絶対のルールではありませんが、迷った時の目安になります。

よくあるミス

ミス問題修正
子要素に display: grid を書く一覧が並ばない親要素に指定
列幅を固定しすぎるスマホではみ出すminmax を使う
gap の代わりに個別margin余白管理が複雑Gridでは gap を使う
見出し階層が崩れる構造が分かりにくいh2 の中のカードは h3

練習

次を実装してください。

  1. 学習カードを6個に増やす
  2. grid-template-columns: 1fr 1fr 1fr を試す
  3. repeat(auto-fit, minmax(220px, 1fr)) に変更する
  4. 画面幅を変えて表示を確認する

次のステップ

CSS入門 #5 - スマホ対応のレスポンシブデザイン で、スマホでも読みやすいページにします。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR