CSS Gridで自由自在なレイアウトを作る方法

はじめに

CSS Gridは、Webページのレイアウトを作成するための強力なツールです。特にgrid-template-areasを使うと、視覚的に分かりやすい形でボックスの配置を定義できます。

この記事では、CSS Gridを使って複数のボックスを自由に配置するレイアウトの作り方を紹介します。

完成デモ

6つのボックスがgrid-template-areasで配置されています。画面幅を変えると、レスポンシブにレイアウトが変化します。

プレビュー

HTML

<div class="demo-grid-wrapper">
  <div class="demo-grid-box demo-grid-box--1"></div>
  <div class="demo-grid-box demo-grid-box--2"></div>
  <div class="demo-grid-box demo-grid-box--3"></div>
  <div class="demo-grid-box demo-grid-box--4"></div>
  <div class="demo-grid-box demo-grid-box--5"></div>
  <div class="demo-grid-box demo-grid-box--6"></div>
</div>

CSS

.demo-grid-wrapper {
  width: 100%;
  display: grid;
  grid-template: repeat(4, 60px) / repeat(3, 1fr);
  gap: 0.5rem;
  grid-template-areas:
    'box1 box2 box2'
    'box1 box3 box5'
    'box4 box3 box5'
    'box4 box3 box6';
}

.demo-grid-box {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.demo-grid-box--1 {
  grid-area: box1;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
}

.demo-grid-box--2 {
  grid-area: box2;
  background: linear-gradient(135deg, #4ecdc4 0%, #44a39d 100%);
}

.demo-grid-box--3 {
  grid-area: box3;
  background: linear-gradient(135deg, #667eea 0%, #5a6fd6 100%);
}

.demo-grid-box--4 {
  grid-area: box4;
  background: linear-gradient(135deg, #f7b731 0%, #e5a82a 100%);
}

.demo-grid-box--5 {
  grid-area: box5;
  background: linear-gradient(135deg, #a55eea 0%, #9550d6 100%);
}

.demo-grid-box--6 {
  grid-area: box6;
  background: linear-gradient(135deg, #fd79a8 0%, #e56b96 100%);
}

grid-template-areasの仕組み

grid-template-areasは、グリッドレイアウトを視覚的に定義できるプロパティです。

文字列でグリッドの各セルに名前を付け、同じ名前のセルは結合されます。まるでテキストでレイアウトを描くような感覚で設計できます。

```
grid-template-areas:
"box1 box2 box2"
"box1 box3 box5"
"box4 box3 box5"
"box4 box3 box6";
```

この例では、box1は1列目の1〜2行目、box2は2〜3列目の1行目、box3は2列目の2〜4行目を占めています。

HTMLコード

<div class="grid-wrapper">
  <div class="grid-box grid-box--1"></div>
  <div class="grid-box grid-box--2"></div>
  <div class="grid-box grid-box--3"></div>
  <div class="grid-box grid-box--4"></div>
  <div class="grid-box grid-box--5"></div>
  <div class="grid-box grid-box--6"></div>
</div>

CSSコード

.grid-wrapper {
  display: grid;
  grid-template: repeat(4, 80px) / repeat(3, 1fr);
  gap: 0.5rem;
  grid-template-areas:
    "box1 box2 box2"
    "box1 box3 box5"
    "box4 box3 box5"
    "box4 box3 box6";
}

.grid-box {
  border-radius: 8px;
}

.grid-box--1 {
  grid-area: box1;
  background-color: #ff6b6b;
}

.grid-box--2 {
  grid-area: box2;
  background-color: #4ecdc4;
}

.grid-box--3 {
  grid-area: box3;
  background-color: #667eea;
}

.grid-box--4 {
  grid-area: box4;
  background-color: #f7b731;
}

.grid-box--5 {
  grid-area: box5;
  background-color: #a55eea;
}

.grid-box--6 {
  grid-area: box6;
  background-color: #fd79a8;
}

各プロパティの役割

display: grid

要素をグリッドコンテナにします。子要素はグリッドアイテムとして配置されます。

grid-template

grid-template-rowsとgrid-template-columnsのショートハンド。repeat(4, 80px) / repeat(3, 1fr)は「4行×3列、行の高さは80px、列は均等分割」を意味します。

grid-template-areas

グリッドの各セルに名前を付けて、視覚的にレイアウトを定義します。同じ名前のセルは結合されます。

grid-area

子要素にgrid-template-areasで定義した名前を指定し、その領域に配置します。

gap

グリッドアイテム間の隙間を指定します。row-gapとcolumn-gapのショートハンドです。

1fr

利用可能なスペースを均等に分割する単位。3列で各1frなら、コンテナ幅を3等分します。

レスポンシブ対応

grid-template-areasを使えば、メディアクエリでレイアウトを簡単に変更できます。

画面が小さくなったときに、ボックスの配置を変えてモバイルに最適化したレイアウトにできます。

レスポンシブ対応のCSS

@media (max-width: 768px) {
  .grid-wrapper {
    grid-template-areas:
      "box1 box2 box2"
      "box1 box3 box4"
      "box6 box3 box4"
      "box6 box5 box5";
  }
}

grid-template-areasのメリット

**視覚的に分かりやすい**
コード上でレイアウトの形が見えるため、どの要素がどこに配置されるか一目で理解できます。

**変更が簡単**
レイアウトを変更したいとき、grid-template-areasの文字列を書き換えるだけで済みます。

**レスポンシブに強い**
メディアクエリ内でgrid-template-areasを上書きするだけで、画面サイズに応じたレイアウト変更が可能です。

まとめ

CSS Gridのgrid-template-areasを使うことで、複雑なレイアウトを視覚的に分かりやすいコードで実現できます。

特に、複数のボックスを不規則に配置したい場合や、レスポンシブでレイアウトを大きく変えたい場合に威力を発揮します。

Flexboxとの使い分けとしては、1次元（横一列、縦一列）の配置にはFlexbox、2次元（縦横両方）の配置にはGridが適しています。ぜひプロジェクトで活用してみてください。