CSS Gridで進捗カードを並べる。PCとスマートフォンで列数を変える最小例

2026年10月12日2026年11月3日

CODE

プロジェクトの進捗をWebページにまとめるとき、「計画中」「制作中」「公開済み」のような情報をカードで並べると、全体の状況を見渡しやすくなります。

ただし、PCで横3列に並べたカードを、そのままスマートフォンにも表示すると、文字が窮屈になることがあります。

今回はCSS Gridを使って、PCでは3列、スマートフォンでは1列に切り替える最小例を作ります。

HTMLとCSSの役割を分けて理解できるよう、装飾を最小限にしたコードから始めます。

※以下は学習用のコード例です。MANIARUの本番サイトに組み込んで動作検証したという記録ではありません。

01｜完成イメージを決める

作りたいのは、進捗状況を示す3枚のカードです。

STEP 01：計画中
STEP 02：制作中
STEP 03：公開済み

PCではカードを横3列に並べ、画面幅が狭いスマートフォンでは縦1列に並べます。

カードの中身は変えず、表示する列数だけをCSSで切り替えるのが今回のポイントです。

02｜HTMLでカードを3枚用意する

まず、カードの内容をHTMLで記述します。

<div class="progress-grid">
  <article class="progress-card">
    <h3>STEP 01</h3>
    <p>計画中</p>
  </article>

  <article class="progress-card">
    <h3>STEP 02</h3>
    <p>制作中</p>
  </article>

  <article class="progress-card">
    <h3>STEP 03</h3>
    <p>公開済み</p>
  </article>
</div>

progress-gridは3枚のカードをまとめる親要素です。各カードにはprogress-cardを指定します。

article要素は、独立した情報のまとまりとして扱いたいときに使えます。今回のような短いカードでは、用途に応じてdivを使う設計も可能です。

03｜CSS GridでPCを3列にする

次に、親要素へCSS Gridを指定します。

.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.progress-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #d9e2ee;
  border-radius: 12px;
  background: #fff;
}

指定	役割
`display: grid`	子要素をGridで配置する
`grid-template-columns`	列の数と幅を決める
`repeat(3, ...)`	同じ列指定を3回繰り返す
`1fr`	利用できる幅を分け合う
`gap: 16px`	カード間に余白を作る

minmax(0, 1fr)は、各列が均等に幅を分け合う指定です。長い内容が入る場合でも、列の最小幅による意図しない広がりを抑える助けになります。

04｜スマートフォンでは1列にする

画面幅が狭いときは、メディアクエリで列数を変更します。

@media (max-width: 767px) {
  .progress-grid {
    grid-template-columns: 1fr;
  }
}

この例では、画面幅が767px以下の場合に1列表示へ切り替えます。

767pxは今回の説明用に選んだ値です。実際のサイトでは、カードの内容やレイアウトに合わせて調整します。

05｜HTMLとCSSを組み合わせて確認する

最小例は、HTMLをページに配置し、CSSを適用することで確認できます。

PC幅では3枚のカードが横に並び、スマートフォン幅では縦に並ぶことを目標にします。

確認するポイントは次のとおりです。

PC幅で3列になっているか
画面幅767px以下で1列になるか
カード内の文字がはみ出さないか
カード同士の余白が適切か
横スクロールが発生していないか

※この手順は読者向けの確認方法です。この記事の制作時点で、MANIARU本番環境で実行したという意味ではありません。

06｜列数を変えて応用する

PCで2列にしたい場合は、列の指定を変更します。

.progress-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

また、タブレットでは2列、スマートフォンでは1列といった段階的な切り替えも可能です。

.progress-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1023px) {
  .progress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .progress-grid {
    grid-template-columns: 1fr;
  }
}

上から順に条件を適用し、767px以下では後に書いた1列指定が優先されます。