Blog スタッフブログ

2026.04.27

CSS WEB制作

[CSS]知っておくと便利なグリッドレイアウト

グリッドレイアウト（CSS Grid Layout）とは、Webページの要素を縦横の格子状（グリッド）に配置できるCSSのレイアウト手法です。

他にレイアウトによく用いられるものはfloat 、 position、Flexbox ですが複数行・複数列ではコードが複雑になりがちです。

しかし、複数行・複数列を含む複雑なレイアウトでは、コードが煩雑になりがちでした。

gridを利用すると、行（Row）と列（Column）を定義するだけで、要素を簡単に配置できます。

複数行・複数列レイアウトの商品一覧を例として基本機能を紹介します。

グリッドで作る3列レイアウト

このようなhtmlを3列づつのレイアウトにします。

溢れたitemは次の行に表示します。

<div class="itemList">
  <article class="item">
    <img src="img/item01.jpg" alt="商品1">
    <h3>商品名が入ります</h3>
    <p>商品の説明文が入ります。</p>
  </article>
  <article class="item">
    <img src="img/item02.jpg" alt="商品2">
    <h3>商品名が入ります</h3>
    <p>商品の説明文が入ります。</p>
  </article>
  <article class="item">
    <img src="img/item03.jpg" alt="商品3">
    <h3>商品名が入ります</h3>
    <p>商品の説明文が入ります。</p>
  </article>
  <article class="item">
    <img src="img/item04.jpg" alt="商品3">
    <h3>商品名が入ります</h3>
    <p>商品の説明文が入ります。</p>
  </article>
  <article class="item">
    <img src="img/item05.jpg" alt="商品3">
    <h3>商品名が入ります</h3>
    <p>商品の説明文が入ります。</p>
  </article>
  <article class="item">
    <img src="img/item06.jpg" alt="商品3">
    <h3>商品名が入ります</h3>
    <p>商品の説明文が入ります。</p>
  </article>
</div>

CSSの全体像

.itemList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

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

.item {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.item h3 {
  margin-top: 12px;
  font-size: 18px;
}

.item p {
  margin-top: 8px;
  font-size: 14px;
}

解説

まず親要素 .itemList に display: grid; を指定します。

そうすると子要素である .item がグリッドアイテムとして配置されます。

.itemList {
  display: grid; //グリッドを有効にします
  grid-template-columns: repeat(3, 1fr);　//何列で表示するか
  gap: 24px;　//グリッドアイテムの間隔
}

@media screen and (max-width: 767px) { //レスポンシブ
  .itemList {
    grid-template-columns: 1fr; //一列で表示
  }
}

grid-template-columns: repeat(3, 1fr); なので、均等に3分割で表示されます。

もし列を変える場合は”3”の部分を変更します。