「もっと自由に、きれいにレイアウトしたい！」と思ったことはありませんか？ そんなときに役立つのが、CSSグリッドレイアウトです。

グリッドは、要素を“行と列”に分けて、キレイに並べることができるレイアウト方法です。
難しそうに見えるかもしれませんが、ポイントを押さえれば初心者でもすぐ使えるようになります！

CSSグリッドとは？

CSSグリッドは、ページの中の要素を「マス目状（グリッド）」に配置するための方法です。 上から下、左から右へ、2方向に自由にレイアウトできるのが特徴です。

たとえば、3つの写真やカードを横に並べたいとき、Flexboxでは1列にしか配置できませんが、グリッドなら「2列 × 2行」なども簡単にできます。

基本のグリッドレイアウト

まずは3つのボックスを横並びに表示する基本コードです。

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

display: grid;でグリッドレイアウトを有効にします。 grid-template-columnsは「横の列数と幅」を決めるプロパティです。

ここでは 1fr を3つ並べることで、「幅を3等分した3列レイアウト」になります。
gapは、マス目とマス目のあいだのすき間（余白）を指定しています。

応用1：エリア名でわかりやすく配置

もっと複雑なレイアウトをしたいときは、grid-template-areas を使って名前でエリアを指定できます。

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-columns: 1fr 3fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

このように書くと、ページの構造を名前でわかりやすく整理できます。特にブログのレイアウトなどに便利です。

応用2：画面サイズに合わせて自動調整

レスポンシブ対応も簡単にできます。カードやボックスを、画面が広いときは複数列、狭いときは1列に並べたいときに便利です。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

auto-fitで「入るだけ列を増やす」、minmaxで「最小幅200px・最大で広がる」ように設定しています。 スマホでもPCでも、見た目が自然になる便利な書き方です。

初心者がつまずきやすいポイント

• grid-container と中の要素（子要素）をセットで考える
• grid-template-columnsやgrid-areaなどは、綴りを間違えないように
• 行・列のすき間には gap を使うと簡単

おわりに

CSSグリッドを使えば、見た目も整って、スマホ対応もやりやすくなります。最初は「むずかしそう…」と思うかもしれませんが、何度か試せばすぐに慣れてきます！

次回は、グリッドとFlexboxの違いや、実践的なレイアウト例も紹介予定ですので、ぜひご覧ください！