【CSS】PCで４列、スマホで２列

2026年11月6日 2026年11月6日

acquiesce.inc

CSS Gridを使って、PCでは4列、スマートフォンでは2列にコンテンツを並べる方法を紹介します。画面幅に応じて列数を切り替えるレスポンシブ対応のレイアウトを、HTMLとCSSのサンプルコードを使って解説。画像やカード、商品一覧など、さまざまなWebサイト制作に応用できるシンプルな実装方法です。

HTMLサンプル

４つ並びのブロックを作成します。

<ul class="flow-unit">
    <li>
        <img src="flowimg001.png" alt="流れ1">
        <h4>流れ01</h4>
        <p>流れ01の説明が入ります。</p>
    </li>
    <li>
        <img src="flowimg002.png" alt="流れ2">
        <h4>流れ02</h4>
        <p>流れ02の説明が入ります。</p>
    </li>
    <li>
        <img src="flowimg003.png" alt="流れ3">
        <h4>流れ03</h4>
        <p>流れ02の説明が入ります。</p>
    </li>
    <li>
        <img src="flowimg004.png" alt="流れ4">
        <h4>流れ04</h4>
        <p>流れ02の説明が入ります。</p>
    </li>
</ul>

コピペで使えるCSS

/* PC・タブレットサイズで4列 */
.flow-unit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
}
.flow-unit img{
  width: 100%;
}
.flow-unit h4{
  text-align: center;
  font-weight: bold;
}

/* スマホサイズで２列 */
@media (max-width: 767px) {
  .flow-unit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}