---
title: "CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説"
description: "カードや画像を格子状にきれいに配置したい方へ。CSS Gridが行と列の両軸でレイアウトを組む仕組みと、Flexboxとの使い分けの判断基準を、初めてGridに触れる方が理解しやすいよう基礎から説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/grid-layout-term"
markdown: "https://giga-site.com/articles/grid-layout-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説

写真やカードをきれいに格子状に並べたい。そんなときに力を発揮するのがCSS Gridです。Gridを使うと、行と列の両方を意識した本格的なレイアウトを組めます。この記事では、その考え方の基礎とFlexboxとの違いを初めての方向けに説明します。

> Source HTML: https://giga-site.com/articles/grid-layout-term
> Article index: https://giga-site.com/articles/index.md

## CSS Gridとは

CSS Gridとは、ページを行と列に区切った格子（グリッド）を作り、その升目に要素を配置するCSSのしくみです。方眼紙のマスに絵を置いていくようなイメージで考えると分かりやすいでしょう。

親となる箱に「これはグリッドにする」と指定し、何列・何行に分けるかを決めると、その中の子要素が升目に沿って並びます。

カードを縦横にそろえて並べる、ページ全体を上下左右の領域に分ける、といった二次元的なレイアウトを得意とします。

## 行と列で考えるレイアウト

Gridでは、横の並びを「行」、縦の並びを「列」と呼びます。たとえば3列に分けると指定すれば、要素は3つずつ横に並び、4つ目からは次の行に折り返して並んでいきます。

列の幅や行の高さは、それぞれ自由に決められます。すべて同じ幅にそろえることも、一部だけ広くすることもでき、整然とした配置を作りやすいのが特徴です。

縦と横の両方を同時に意識して組み立てられる点が、一方向に並べるしくみとの大きな違いです。

## 実務ではどこで関係する？

CSS Gridは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

CSS Gridについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## カードを格子状に並べる手順

商品カードや写真を格子状に整列させるときは、次の順で考えると組み立てやすくなります。

1. 並べたいカードを一つの親の箱でまとめる
2. 親の箱に「グリッドにする」という指定を加える
3. 何列に分けるか（列の数と幅）を決める
4. 升目どうしのすき間（間隔）を指定する
5. 実際の表示を見て、列数や間隔を画面に合わせて調整する

## Flexboxとの使い分け

Flexboxは要素を一列に並べる一方向のレイアウトが得意で、CSS Gridは行と列を組み合わせた二方向のレイアウトが得意です。並べたいものが一直線ならFlexbox、縦横の格子で整えたいならGrid、という大まかな目安があります。

実際には両方を組み合わせることもよくあります。ページ全体の大きな区分けはGridで作り、その中のボタンの並びはFlexboxで整える、といった役割分担をすると、それぞれの得意分野を活かせます。

## 格子レイアウトを確認・共有する

Gridのレイアウトは、列数や間隔を変えると見た目の印象が大きく変わります。画面の幅によって崩れていないかも含め、実際にブラウザで表示して確認することが大切です。

ギガサイト便では、CSSを含むZIPをドロップすると共有URLが発行され、格子状の表示を関係者に見てもらえます。同じURLのまま中身を差し替えられるため、列数や間隔を調整しては共有してフィードバックをもらう、という流れを進めやすくなります。

## よくある質問

### CSS Gridは何のために使いますか

行と列に区切った格子に要素を配置し、二次元的なレイアウトを組むために使います。カードを縦横にそろえて並べたり、ページを上下左右の領域に分けたりといった配置を整然と作れます。

### GridとFlexboxはどちらを使えばよいですか

一直線に並べたいならFlexbox、行と列の格子で組みたいならGridが向いています。大きな区分けをGrid、その中の細かい並びをFlexbox、というように組み合わせて使うこともよくあります。

### Gridで何列にするかはどう決めますか

並べたい内容や画面の広さに合わせて決めます。Gridには列の数や幅を指定するしくみがあり、すべて同じ幅にそろえることも一部を広くすることもできます。実際の表示を見ながら調整するのがおすすめです。

### 升目どうしのすき間は調整できますか

できます。Gridには升目の間隔を指定するしくみがあり、行と列のすき間をまとめて、あるいは別々に整えられます。間隔を変えると詰まった印象にもゆとりのある印象にもできます。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [FlexboxとGridとは？レイアウトを整えるCSSの基礎](https://giga-site.com/articles/what-is-flexbox-grid/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [メディアクエリとは？画面幅でデザインを切り替えるCSSの基礎](https://giga-site.com/articles/media-query-term/index.md)
- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [ボックスモデルとは？余白・枠・幅の関係をやさしく解説](https://giga-site.com/articles/box-model-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説",
  "description": "カードや画像を格子状にきれいに配置したい方へ。CSS Gridが行と列の両軸でレイアウトを組む仕組みと、Flexboxとの使い分けの判断基準を、初めてGridに触れる方が理解しやすいよう基礎から説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/grid-layout-term",
  "url": "https://giga-site.com/articles/grid-layout-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "CSS Gridは何のために使いますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "行と列に区切った格子に要素を配置し、二次元的なレイアウトを組むために使います。カードを縦横にそろえて並べたり、ページを上下左右の領域に分けたりといった配置を整然と作れます。"
      }
    },
    {
      "@type": "Question",
      "name": "GridとFlexboxはどちらを使えばよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一直線に並べたいならFlexbox、行と列の格子で組みたいならGridが向いています。大きな区分けをGrid、その中の細かい並びをFlexbox、というように組み合わせて使うこともよくあります。"
      }
    },
    {
      "@type": "Question",
      "name": "Gridで何列にするかはどう決めますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "並べたい内容や画面の広さに合わせて決めます。Gridには列の数や幅を指定するしくみがあり、すべて同じ幅にそろえることも一部を広くすることもできます。実際の表示を見ながら調整するのがおすすめです。"
      }
    },
    {
      "@type": "Question",
      "name": "升目どうしのすき間は調整できますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "できます。Gridには升目の間隔を指定するしくみがあり、行と列のすき間をまとめて、あるいは別々に整えられます。間隔を変えると詰まった印象にもゆとりのある印象にもできます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```