CSSグリッドでデザインを再現するコツと練習問題

Posted on by

〜“見た目どおりに組める”エンジニアになるために〜

デザイン再現の壁を超えるカギは「グリッド」

Web制作をしていると、必ずぶつかる課題があります。
「デザインカンプ通りに再現できない」「高さや比率が合わない」「スマホで崩れる」——。

その多くは、レイアウト構造を正確に理解していないことが原因です。

そんなときに頼りになるのが、CSS Grid Layout（グリッドレイアウト）。
Flexboxが“横・縦の並び”を扱うのに対し、
Gridは縦×横の二次元的なレイアウトを得意とします。

Flexboxが「要素の整列」なら、Gridは「デザインの設計図」。

この記事では、CSSグリッドを使ってデザインを正確に再現するコツと、
学習を定着させるための練習問題を紹介します。

Gridの基本を“建築の設計図”として捉える

CSS Gridは、要素を「マス目」に配置する仕組みです。
たとえば新聞紙や将棋盤のように、行と列で整理された構造を作ります。

用語を感覚で理解しよう

用語意味イメージ
grid container親要素全体のレイアウトエリア
grid item子要素各ブロック（要素）
grid-template-columns列幅の設定横の線を引く
grid-template-rows行の高さ設定縦の線を引く
grid-gap（gap）すき間ブロック間の余白

ポイント：Gridはまず「線を引いてから中を埋める」。
これを意識すると、Flexboxとは違う発想でレイアウトを考えられるようになります。

まずは“3×3のマス目”を作って動きを理解する

最初は、シンプルな正方形グリッドを作って“感覚”をつかみましょう👇

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}
.grid div {
  background: #a7d8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

repeat(3, 1fr) は「同じ比率で3列を作る」という意味。
これで、どんな画面サイズでも正方形が3×3で整列します。

デザイン再現でつまずくポイントと“3つのコツ”

コツ①：「線」から考える

多くの人は、「要素を置く」ことから始めます。
しかしGridでは、「どこに線を引くか」を先に決めるのがコツです。

grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px auto 80px;

これは「3列×3行」のレイアウトを設計しているイメージ。
カンプを見たときに、まず「縦に何分割・横に何分割か」を頭の中で線を引きましょう。

コツ②：「エリア名」で整理する

コードが複雑になるときは、grid-template-areas を使うのがベスト。

.grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px auto 60px;
  gap: 20px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

こうすることで、HTML構造とデザイン構造を分離できます。
つまり、マークアップの順番に縛られずに自由に配置できるのです。

コツ③：「比率」でコントロールする

デザイン再現で最も重要なのが、比率（fr）とminmax()の使い分け。

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

これは「中央カラムを2倍の幅にする」という設定。
fr（fraction）は、残りのスペースを分割する単位です。

また、以下のように最小値と最大値を指定することで、
レスポンシブにも対応できます

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

Flexboxとの使い分けで精度を高める

「Gridだけで全部やる」のはおすすめしません。
Flexboxと併用することで、より柔軟で実用的なレイアウトが実現します。

目的適した技術
横並び・中央揃えFlexbox
全体レイアウト設計Grid
カードの配置・並び替えGrid
要素内の整列Flexbox

使い分けの鉄則

“構造を作る”ときはGrid、
“中身を整える”ときはFlexbox。

第5章：よくある失敗と修正パターン

高さが揃わない

→ align-items: stretch; を設定すれば、要素の高さが自動で揃います。

レスポンシブで崩れる

→ minmax() と auto-fit を組み合わせて、画面幅に応じて列数を自動調整。

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

余白が均等でない

→ gap を統一する。marginよりもシンプルで安定します。

CSSグリッド練習問題【初級〜上級】

練習を重ねることで、Gridの「感覚」を体に染み込ませましょう。
ここでは、段階的に学べる練習課題を紹介します

初級：カードを等間隔に並べる

目標：均等なカードレイアウトを作る。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

コツ：3列を指定して「カード一覧ページ」の基礎を作る。

中級：レスポンシブカードグリッド

目標：スマホでは1列、PCでは3列に切り替える。

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

コツ：auto-fit を使うと、自動的に列数を調整できる。

上級：2カラム＋フッターのページレイアウト

目標：デザインカンプに近い構成を再現する。

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px auto 60px;
  min-height: 100vh;
  gap: 20px;
}
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

コツ：構造を「ヘッダー・サイドバー・メイン・フッター」で明確に分ける。

デザイン再現力を高める“3つの練習習慣”

① カンプを見て「線」を引く練習

PhotoshopやFigmaのデザインを見て、
「縦に何列・横に何段に分かれているか」を線で分割して考えましょう。

② 模写コーディングでGridを使う

サイトを模写する際、
「FlexboxではなくGridで組んでみる」と新しい発見があります。

③ “比率で考える”クセをつける

px単位で調整するよりも、
fr・auto・minmax()で「比率」ベースにすることで、
柔軟で保守しやすいコードになります。

まとめ：CSSグリッドは“デザインの言語”をコードにする技術

CSS Gridを理解すれば、
デザインの意図を構造として正確に再現できるようになります。

  • Gridは「線を引く」発想
  • 比率で構造を設計する
  • Flexboxと組み合わせて使う
  • 模写と実験で感覚を磨く

「見たまま再現できる」＝エンジニアとしての表現力。

CSSグリッドは、その力を磨く最高の練習台です。
ぜひ、この記事で紹介した課題を使って、自分の“レイアウト脳”を鍛えてみてください。