【CSS】カードを横並びにする最適な方法

2023年7月30日2023年10月15日

PCではカードが横並びになっていて、スマホ表示では縦に並べたい

よくあるカードの実装パターンですが、私がよく使用する、おすすめの最適解をご紹介します。

Gridレイアウトを使用したカードを横並びにする効率的な実装方法
カード間の余白の調整や個別指定のテクニック
レスポンシブデザインでのカードの縦並びへの対応方法

CSSでカードを横並びにする最適な方法は、Gridレイアウト

アイテムを横並びにしたいとき、真っ先に思い浮かべるのは『Flexbox』だと思う人も多いかと思います。

ですがコードの記述量も少なく、レスポンシブにも柔軟に対応することができる『Gridレイアウト』が大変便利でおすすめです。

基本のhtml

前提として…

.cards というクラスの中に、3枚のカードが入っています
.cardは、画像、タイトル、テキストのシンプルなレイアウト構造

HTMLの基本形はこちらです。

※カードにリンクが必要な場合は、各 .card を『aタグ』で囲ってください

<div class="cards">
  <div class="card">
    <div class="card__img">
      <img src="./img/gazou01.jpg" alt="画像">
    </div>
    <div class="card__body">
      <h3 class="card__title">タイトル</h3>
      <p class="card__text">
        テキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
　</div>
  <div class="card">
    <div class="card__img">
      <img src="./img/gazou02.jpg" alt="画像">
    </div>
    <div class="card__body">
      <h3 class="card__title">タイトル</h3>
      <p class="card__text">
        テキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="./img/gazou03.jpg" alt="画像">
    </div>
    <div class="card__body">
      <h3 class="card__title">タイトル</h3>
      <p class="card__text">
        テキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
</div>

CSSの書き方

次に、CSSの完成形です。

（※PCファーストの記述となっています）

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 800px;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 以下、見た目調整のためのCSS */
.card {
  border: 1px solid black;
}

.card__body {
  padding: 15px;
}

.card__title {
  font-size: 20px;
  font-weight: bold;
}

.card__text {
  line-height: 1.4;
  margin-top: 10px;
}

では主要部分を解説していきます。

CSSでカードを横並びにする最適な方法・解説

Gridの指定

こちらで3枚のカードが横並びになります

.cards {
  display: grid;  /* Gridレイアウトの指定 */
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 800px;  /* カード群全体の横幅の指定 */
  margin-inline: auto;　　/* 中央寄せの記述 */
}

上記の『3』の部分を『4』などにすると、4枚の横並びになります
（ただし4枚目が存在しない場合は、空白が作られます）

grid-template-columns: repeat(4, 1fr);

こちらでカード間の余白を作ります

gap: 24px;

もしカードが2段以上（今回の例で4枚以上の表示の場合など）のとき、カード間の横の余白は24pxでいいが、上下の余白は30pxほしい、などのときは分けて指定します。

  column-gap: 24px;  /* 横余白の個別指定 */
  row-gap: 30px;  /* 上下余白の個別指定 */

そして、それを一括指定もできます。

  gap: 30px 24px;  /* 一括で指定（行・列の順） */

レスポンシブ（スマホ表示）で縦並びにする書き方

※『画面幅が768pxより小さい場合』の記述です

先程『3』にしていたところを『1』にすることで、3列だったカードが1列になります。

@media screen and (max-width: 768px) {
  .cards {
    grid-template-columns: repeat(1, 1fr);
  }
}

カード間の余白はgapプロパティで制御しているため、レスポンシブでは数値の変更のみで大丈夫です。
※gapを使用すると『一番上のカードの上余白はつけない』などを考慮し、:nth-child(n + 2)や:not(:first-child)などの擬似クラスを使用して余白を調整する必要もありません