CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説

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のまま中身を差し替えられるため、列数や間隔を調整しては共有してフィードバックをもらう、という流れを進めやすくなります。