CSS Grid入門：2次元レイアウトを思い通りにデザインしよう

  • #CSS
  • #Grid
  • #レイアウト
  • #初心者向け
  • #Webデザイン

CSS Grid入門：2次元レイアウトを思い通りにデザインしよう

導入

Webデザインで「きれいな2列構成」や「カードをきれいに並べたい」と感じたことはありませんか？ Flexboxが「1方向の整列」に強いのに対して、CSS Grid（グリッドレイアウト）は縦・横の2方向を同時に扱えるのが特徴です。 この記事では、初心者の方でも理解しやすいように、CSS Gridの基本構造から実際の使い方までをステップ形式で紹介します。

前提条件

  • HTMLとCSSの基礎が分かること（<div>タグやクラス指定など）
  • コードエディタ（VS Codeなど）を使える環境
  • ブラウザで開発者ツールを使って動作確認ができること

ステップ1：Gridを有効にする

Gridを使うには、親要素にdisplay: grid;を指定します。

<div class="grid-container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
</div>
.grid-container {
  display: grid; /* Gridを有効化 */
  grid-template-columns: 200px 200px; /* 2列構成 */
  grid-template-rows: auto auto; /* 2行構成 */
  gap: 16px; /* 要素の間隔 */
}

.item {
  background: #cbe5f6;
  padding: 16px;
  text-align: center;
}

このコードで、2列×2行のレイアウトが完成します。 grid-template-columnsとgrid-template-rowsが、列と行の大きさを決める設定です。

ステップ2：柔軟な幅指定をしてみよう

Gridの便利な点は、幅を固定せずに柔軟に設定できることです。

自動で均等配置する例

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等分 */
  gap: 16px;
}

1frは「余白を均等に分ける」という意味です。 これにより、画面サイズが変わっても自動的に3等分のレイアウトが保たれます。

ステップ3：レスポンシブ対応にする

minmax()関数を使うと、カードレイアウトをレスポンシブ対応にできます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
  • auto-fit：入るだけ自動で列を増やす
  • minmax(200px, 1fr)：最小200px、最大で等分（1fr）

この指定を使えば、画面が広いときは3〜4列、狭いスマホ画面では1列になるよう自動調整されます。

ベストプラクティス

  • Gridは「2次元（縦＋横）」、Flexboxは「1次元（横または縦）」で使い分ける
  • 均等な並びならrepeat(auto-fit, minmax())が便利
  • 要素の隙間はgapプロパティで調整（marginより安全）
  • 固定幅と可変幅を混ぜる場合はgrid-template-columns: 200px 1fr;のように書く
  • 複雑なレイアウトではgrid-template-areasで視覚的に整理するとわかりやすい

よくある質問

Q. FlexboxとGridの違いは？ A. Flexboxは「1方向の配置」に適しており、Gridは「縦と横の両方」を同時に制御できます。

Q. どんな場面でGridを使えばいい？ A. 商品一覧、ニュースカード、ギャラリーなど、複数要素を整列させるレイアウトに最適です。

Q. ブラウザ対応は大丈夫？ A. 主要なモダンブラウザ（Chrome、Edge、Firefox、Safari）はすべて対応済みです。

まとめ

CSS Gridを使うと、従来よりもずっと簡単に美しいレイアウトが作れます。 重要なポイントは以下の3つです：

  1. display: grid;でGridを有効化する
  2. grid-template-columnsとgrid-template-rowsで構成を決める
  3. auto-fitやminmax()を使えばレスポンシブにも対応可能

ぜひ、手元のプロジェクトでCSS Gridを試して、柔軟なレイアウトの自由度を体験してみてください。