CSS Gridレイアウトの基本とおしゃれなデザイン例【HTML＆CSS付き解説】

Webデザインの自由度を大きく広げてくれる「CSS Grid」。
従来のFlexboxでは実現しにくかった複雑なレイアウトも、Gridを使えばシンプルなコードで実装できます。
この記事では、CSS Gridの基本的な使い方から、実際のレイアウト例、HTML・CSSコードの実装方法まで、わかりやすく解説します。
初心者の方でもすぐに実践できるように丁寧にまとめていますので、ぜひ最後までご覧ください。

CSS Gridとは？

CSS Gridは、2次元のレイアウトシステムで、縦（行）・横（列）の両方の軸で要素を自由に配置することができます。

特徴

親要素にdisplay: grid;を指定するだけで利用可能
複雑なレイアウトを直感的に組みやすい
レスポンシブデザインにも対応しやすい

Flexboxとの違い

Flexbox	CSS Grid
1次元レイアウト	2次元レイアウト
並び順が重要	配置のコントロールが重要
要素のサイズに依存	グリッドのサイズに依存

CSS Gridの基本プロパティ

CSS Gridを使う上での基本的なプロパティをいくつか紹介します。

1. display: grid;

Gridコンテナを作成します。

.container {
  display: grid;
}

2. grid-template-columns, grid-template-rows

列と行の数や幅を指定します。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3列に分割 */
  grid-template-rows: auto;
}

3. gap

行・列の間隔を設定します。

.container {
  gap: 20px;
}

4. grid-column, grid-row

アイテムの配置範囲を指定します。

.item1 {
  grid-column: 1 / 3; /* 1列目から2列目まで */
}

グリッドレイアウトの基本パターン

ここからは、CSS Gridを使ったレイアウトの実例を紹介します。

例1：3カラムの基本レイアウト

HTML

<div class="container">
  <div class="item">左カラム</div>
  <div class="item">中央カラム</div>
  <div class="item">右カラム</div>
</div>

CSS

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

.item {
  background-color: #f2f2f2;
  padding: 20px;
}

解説

左右のカラムは1fr
中央は2frで少し広く表示
gapで余白も追加

例2：ヘッダー・メイン・サイドバー・フッターのレイアウト

HTML

<div class="layout">
  <header>ヘッダー</header>
  <nav>ナビ</nav>
  <main>メインコンテンツ</main>
  <aside>サイドバー</aside>
  <footer>フッター</footer>
</div>

CSS

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "aside main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 10px;
}

header {
  grid-area: header;
  background: #ccc;
}

nav {
  grid-area: nav;
  background: #ddd;
}

main {
  grid-area: main;
  background: #eee;
}

aside {
  grid-area: aside;
  background: #ddd;
}

footer {
  grid-area: footer;
  background: #ccc;
}

解説

grid-template-areasを使うことで視覚的にレイアウトを定義できる
各要素にgrid-areaを指定し、位置を割り当てている

レスポンシブ対応のグリッドレイアウト

CSS Gridは、メディアクエリとの相性も抜群です。

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

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

解説

通常は3列
画面幅が768px以下になると1列に変更

Gridと組み合わせて使いたいCSSテクニック

minmax()：最小値と最大値を指定して柔軟な幅に対応
repeat()：同じサイズの列を簡潔に指定
auto-fit / auto-fill：可変グリッドでカードデザインに便利

例

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

デザイン性のあるカードレイアウトの実装例

HTML

<div class="card-grid">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>

CSS

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

.card {
  background: white;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}