【初心者向け】CSS Grid の使い方入門：サンプルと解説

Webデザインでレイアウトを組むとき、「float」「flexbox」を使ってきた方も多いと思います。しかし、より直感的で柔軟なレイアウトを可能にするのが CSS Grid Layout です。
この記事では、CSS Grid の基本的な使い方から実践的なサンプルまでわかりやすく紹介します。

CSS Grid とは？

CSS Grid は、2次元（縦 × 横）でのレイアウトを管理できる仕組みです。
Flexbox が「1次元（横方向または縦方向）」に強いのに対して、
Grid は複雑なレイアウトを簡単に組めるのが特徴です。

例えば、ブログ記事一覧やギャラリー、ダッシュボードのようなレイアウトに最適です。

基本の書き方

HTML

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

CSS

.grid-container {
  display: grid; /* グリッドを有効化 */
  grid-template-columns: repeat(3, 1fr); /* 3列レイアウト */
  gap: 10px; /* アイテム間の余白 */
}

.item {
  background: #3498db;
  color: #fff;
  text-align: center;
  padding: 20px;
}

この例では 3列レイアウト を作成し、各アイテムに 10px の余白を設定しています。

列幅を柔軟に指定する

grid-template-columns には、固定値（px）、割合（%）、自動調整（fr）などが使えます。

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 15px;
}

• 200px → 固定幅
• 1fr → 残りのスペースを 1 として分配
• 2fr → 残りのスペースを 2 として分配

このように「固定」と「柔軟」を組み合わせられるのが Grid の強みです。

行の高さを指定する

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
  gap: 10px;
}

• 1行目 → 高さ 100px
• 2行目 → 高さ 200px

grid-template-rows を使えば「縦方向のコントロール」も簡単です。

アイテムの配置をカスタマイズする

特定のアイテムだけ、複数列・複数行にまたがせることも可能です。

.item:first-child {
  grid-column: 1 / 3; /* 1列目から2列目まで */
  grid-row: 1 / 3;    /* 1行目から2行目まで */
}

ギャラリーやカード型のデザインで「大きなメイン画像を1つ＋小さな画像を複数」
といったレイアウトに便利です。

実践：レスポンシブなカードレイアウト

最後に、よく使う「カード一覧」のレスポンシブ対応サンプルです。

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

.item {
  background: #2ecc71;
  padding: 20px;
  border-radius: 8px;
  color: #fff;
}

• auto-fit … 画面幅に応じて列数を自動調整
• minmax(250px, 1fr) … 最小250px、最大で均等に伸縮

PC では 3列、スマホでは 1列といった レスポンシブデザイン をシンプルに実現できます。

CSS Grid チートシート

よく使うプロパティを「やりたいこと」別にまとめました。コピーしてそのまま使えます。

container { display: grid; }

grid-template-columns: repeat(3, 1fr);

grid-template-rows: 120px auto;

gap: 16px; column-gap: 24px;

grid-template-columns: 240px 1fr 2fr;

grid-template-columns: minmax(240px, 1fr) 2fr;

repeat(auto-fit, minmax(250px, 1fr));

repeat(auto-fill, minmax(250px, 1fr));

grid-auto-rows: minmax(120px, auto);

grid-auto-columns: 1fr;

grid-auto-flow: row | column | dense;

place-items: start center;

place-content: center;

place-self: center;

grid-column: 1 / 3; grid-row: span 2;

.hero { grid-area: hero; }

grid-template-areas:
  'header header'
  'sidebar main'
  'footer footer';

grid-template-columns: [side] 240px [content-start] 1fr [content-end];

grid-template-columns: fit-content(20rem) 1fr;

grid-template-columns: min-content 1fr;

grid: auto / 240px 1fr;

.grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

.grid{grid-template-columns:280px 1fr;}

.grid{
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}

.child{ display:grid; grid-template-rows: subgrid; }

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

.layout {
  display:grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
}
.header{grid-area:header} .sidebar{grid-area:sidebar} .main{grid-area:main} .footer{grid-area:footer}

まとめ

• Grid は2次元レイアウトに最適
• grid-template-columns と grid-template-rows で行と列を定義
• fr を使えば柔軟な幅調整が可能
• grid-column / grid-row で個別の配置も簡単
• auto-fit + minmax() を使えばレスポンシブ対応もラクラク

CSS Grid をマスターすると、これまで面倒だった複雑なレイアウトもシンプルに書けます。
ぜひ実際のサイト制作で試してみてください！