グリッドの基本！最小限のプロパティを使用した3カラムレイアウトの構築方法！

INDEX

はじめに
1. この記事の対象者
2. この記事で学べること
グリッドレイアウトについて
1. グリッドレイアウトの基本概念
グリッドレイアウトで使われる基本的なプロパティ
1. グリッドコンテナのプロパティ
2. グリッドアイテムのプロパティ
グリッドレイアウトでの聖杯レイアウトの実装
最後に

はじめに

ウェブ制作において、デザインのレイアウトをコーディングで再現する方法は様々ですが、その中でもグリッドレイアウトを使用した構築は、とても強力で柔軟なレイアウトを実現することができます。

この記事では、グリッドレイアウトの基本的な概念と使い方について、グリッドを使用した3カラムレイアウトの構築を例にして解説します。

この記事の対象者

ウェブ制作初心者の方
グリッドレイアウトについて知りたい方
ウェブページのレイアウト構築に興味がある方

この記事で学べること

グリッドレイアウトの基本
グリッドの定義方法
グリッドアイテムの配置方法

グリッドレイアウトについて

グリッドレイアウトは、ウェブ制作においてレイアウトを効果的に制御するための手法です。

レイアウトの構築にはフレックスボックスを使用することも多いです。フレックスボックスは要素を1次元（一方向のみ）で配置する場合に適しており、２次元で配置する場合には少し複雑な制御を行う必要があります。

対して、グリッドレイアウトは要素を２次元（水平・垂直方向）で配置することに適しており、フレックスボックスを使用した２次元配置と比べて直感的に理解しやすく、柔軟なレイアウトを構築することができます。

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

グリッドレイアウトでは、水平方向を「列（column）」、垂直方向を「行（row）」として扱うことで、複雑なレイアウトを簡単に構築するための多くの機能があります。

また、グリッドレイアウトでは親要素を「グリッドコンテナ」、グリッドコンテナに配置される子要素を「グリッドアイテム」として扱います。

それぞれに指定できるプロパティが異なるので、グリッドレイアウトで使われる基本的なプロパティと特徴を理解することが重要です。

グリッドレイアウトで使われる基本的なプロパティ

グリッドレイアウトで基本的に使われるプロパティについて、グリッドコンテナとグリッドアイテムに分けてご紹介します。

最低限これらを理解するだけでも、グリッドレイアウトを利用した実践的なレイアウト構築ができるようになります。

グリッドコンテナのプロパティ

グリッドコンテナはグリッドアイテムの親要素として定義されます。グリッドコンテナのプロパティでは主に、行・列の幅や高さ、数、余白の指定を行います。

display: grid;: 要素をグリッドコンテナとして定義します。
grid-template-columns:: 列の配置・数・幅を定義します。
grid-template-rows:: 行の配置・数・幅を定義します。
gap:（row-gap, column-gap）: 行や列の間の余白を定義します。

グリッドアイテムのプロパティ

HTMLの構造上でグリッドコンテナの直下に配置されている要素はグリッドアイテムとして扱われます。グリッドアイテムには主に、アイテムの位置や範囲を指定します。

grid-column:: アイテムが占有する範囲の水平方向の位置を定義します。
grid-row:: アイテムが占有する範囲の垂直方向の位置を定義します。
grid-area:: アイテムが占有する範囲を一括して指定します。
justify-self:: アイテムが占有する範囲内でのアイテムの水平方向の位置を定義します。
align-self:: アイテムが占有する範囲内でのアイテムの垂直方向の位置を定義します。

これらを抑えておけばグリッドレイアウトでのレイアウト構築ができるようになるでしょう。

グリッドレイアウトには他にも便利なプロパティがあるので、興味のある方は調べてみてください。

グリッドレイアウトでの聖杯レイアウトの実装

グリッドレイアウトの使い方の解説として、比較的規模の大きいウェブサイトでよく採用されている「聖杯レイアウト」をプロパティの説明を含めながら実装してみます。

聖杯レイアウトとは、ヘッダー、ナビゲーション、メインコンテンツ、サイドバー、フッターを以下のように配置することを指しています。

聖杯レイアウトは、ナビゲーション、メインコンテンツ、サイドバーが３列に並んでいるという特徴があり、「３カラムレイアウト」とも呼ばれます。

グリッドレイアウトを使用することで、簡潔なマークアップとスタイリングで聖杯レイアウトを構築することができます。

まずはHTMLファイルを用意します。

聖杯レイアウトのHTML

<div class="container">
  <header>header</header>

  <nav>
    <h2>ナビゲーション</h2>
    <ul>
      <li>ホーム</li>
      <li>サービス</li>
      <li>メニュー</li>
      <li>お問い合わせ</li>
    </ul>
  </nav>

  <main>
    <h2>メインコンテンツ</h2>
    <p>メインコンテンツが入ります。</p>
  </main>

  <aside>
    <h2>サイドバー</h2>
    <section>
      <h3>期間限定メニュー</h3>
      <ul>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
      </ul>
    </section>
    <section>
      <h3>オススメのメニュー</h3>
      <ul>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
      </ul>
    </section>
  </aside>

  <footer>footer</footer>
</div>

グリッドレイアウトで聖杯レイアウトを構築するには、全ての要素を一つのdivタグで囲ってしまうのが簡単です。ここではdivタグに.containerというクラス名を付けています。

.containerの直下には、header、nav、main、aside、footerが配置されています。これでグリッドレイアウトを使用する準備が整いました。

レイアウトの仕様

モバイルファーストでスタイリングを行っていきますが、聖杯レイアウトはPC向けのレイアウトなので各デバイス幅でレイアウトの調整をするために仕様を定義しておきます。

モバイルでのレイアウト

モバイル端末では全て垂直方向に配置します。

列の数：１列
行の数：5行

タブレットでのレイアウト

タブレット端末ではナビゲーションとメインコンテンツを横並びに配置します。

列の数：2列
行の数：4行
ブレイクポイント：768px

PCでのレイアウト

PCではナビゲーション、メインコンテンツ、サイドバーを横並びに配置します。

列の数：3列
行の数：3行
ブレイクポイント：992px

CSSの基本設定

各要素の幅や位置を確認しやすくするために簡単にスタイリングをしておきます。グリッドレイアウトとは関係ないので解説は割愛します。

@charset "UTF-8";

/* =============================
基本設定
============================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    margin: 0;
}

/* =============================
簡単なスタイリング
============================= */
nav,
main,
aside {
  padding: 16px;
}

header,
footer {
  font-size: 32px;
  font-weight: bold;
  line-height: 100px;
  text-align: center;
}

header {
  background-color: aliceblue;
}

nav {
  background-color: lavenderblush;
}

main {
  background-color: seashell;
  min-height: 300px;
}

aside {
  background-color: mintcream;
}

footer {
  background-color: cornsilk;
}

それでは本題に入ります。

グリッドコンテナの作成

グリッドレイアウトを使用するには、まず最初にグリッドコンテナを作成する必要があります。

グリッドコンテナは、ウェブページ上の特定の要素を指定します。このコンテナ内に要素を配置し、グリッドとして扱います。

サンプルのHTMLは以下のような構造でした。

<div class="container">
  <header>…</header>
  <nav>…</nav>
  <main>…</main>
  <aside>…</aside>
  <footer>…</footer>
</div>

全ての要素の親要素である.containerに「display: grid;」を指定します。

/* =============================
レイアウト
============================= */
.container {
  display: grid;
}

これで.containerをグリッドコンテナ、直下の子要素であるheader～footerの全ての要素をグリッドアイテムとして扱うことができます。

グリッドの定義方法

次に、グリッドコンテナに対してグリッド（列と行）を定義します。

現状ではdisplay: grid;を記述しただけなのでレイアウトは何も変わりません。モバイル端末でのレイアウトはこのままでいいですが、タブレットとPCではレイアウトを変更する必要があります。

列の定義には「grid-template-columns」、行の定義には「grid-template-rows」というプロパティを使用します。

.container {
  grid-template-columns: 1列目の幅 2列目の幅 3列目の幅 … ;
  grid-template-rows: 1行目の高さ 2行目の高さ 3行目の高さ … ;
}

値の単位はpx値やvw、％などを指定できますが、グリッドレイアウトで使える1frという単位もあります。

まずはタブレットでのレイアウト用にグリッドを定義します。

タブレットのグリッドを定義

タブレットでのレイアウトの仕様は以下でした。

列の数：2列
行の数：4行
ブレイクポイント：768px

ここでは以下のようにグリッドを定義します。

/* タブレットでのレイアウト（2列 × 4行） */
@media screen and (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px auto auto 100px;
  }
}

この例では、仕様にそって2列と4行のグリッドを作成しています。

grid-template-columnsは半角スペース区切りで列の数とグリッド幅を定義します。仕様では2列となっているので、値は「200px」と「1fr」の2つを指定してあります。

grid-template-columns: 200px 1fr;

frという単位は、グリッドレイアウトで使用される特別な単位です。残りのスペースを均等に分割させることができます。この例では「画面幅 – 200px」がこの列の幅となります。

値の順番はグリッドの左側から順番に適用されます。よって、左から1列目は200px、2列目は残りのスペースをグリッド幅として設定しています。

grid-template-rowsも指定方法は同じです。

grid-template-columnsが列の数とグリッド幅を定義するのに対し、grid-template-rowsは行の数とグリッドの高さを定義します。

grid-template-rows: 100px auto auto 100px;

この例では、仕様にそってgrid-template-rowsの値を4つ指定しています。

それぞれの行の高さは、1行目と4行目は100pxになります。また、2行目と3行目はautoを指定しており、その行に配置されるグリッドアイテムのもっとも高い要素に合わせられます。

これでタブレットのレイアウト仕様どおりにグリッドを定義できました。

グリッドアイテムに対して位置と範囲の指定をしていないので意図したレイアウトではないですが、ブラウザで確認するとグリッドが形成されていることが分かります。

続いて、PCのグリッドも定義しましょう。

PCでのグリッドを定義

PCでのレイアウトの仕様は以下でした。

列の数：3列
行の数：3行
ブレイクポイント：992px

以下のように記述します。

/* PCでのレイアウト（3列 × 3行） */
@media screen and (min-width: 992px) {
  .container {
    grid-template-columns: 200px 1fr 240px;
    grid-template-rows: 100px auto 100px;
  }
}

grid-template-columnsとgrid-template-rowsの値を変更しました。

列について、grid-template-columnsの3番目の値に240pxを追加しました。グリッド幅は240pxで、ここにはサイドバーを配置する予定です。

列が増えたことにより、真ん中のグリッドの幅は「画面幅 – 200px – 240px」になります。

続いて行ですが、サイドバーを配置していた3行目を削除しました。これでPCの仕様どおりにグリッドができました。

アイテムの配置

次はグリッドアイテムをグリッド内に配置します。

デフォルトではグリッド一つ一つに対してHTML構造の上から順に配置されるので、それぞれのグリッドアイテムに対して列・行の位置と範囲を指定します。

グリッドアイテムの位置と範囲は、それぞれのグリッドアイテムに対して「grid-column」と「grid-row」プロパティを指定することで定義できます。

.item {
  grid-column: 2; /* 2列目に配置 */
  grid-row: 3; /* 3行目に配置 */
}

この例では、.itemはグリッドの2列目・3行目に配置されます。

グリッドアイテムの範囲を指定する場合は以下のように記述します。

.item {
  grid-column: 1 / 3; /* 1列目から3列目までの間に配置 */
  grid-row: 2 / 4;    /* 2行目から4行目までの間に配置 */
}

この例では、.itemはグリッド内での1列目から3列目までの2列分、2行目から4行目までの2行分を占有します。

グリッドアイテムを配置する際の注意点として、2カラムレイアウトでアイテムの範囲を2列分保有したい場合の指定は「grid-column: 1 / 2;」ではありません。

上記の指定方法は「このグリッドの始めの位置 / このグリッドの始めの位置」と考えることができます。

つまり、2列分保有したい場合は「grid-column: 1 / 3;」と指定する必要があります。

他にもspanキーワードを使用した指定方法などあるので、興味のある方は調べてみるとよいでしょう。

このように、それぞれのグリッドアイテムに各プロパティの値を指定することで、それぞれの位置と範囲を指定することができます。

まずはタブレットから行っていきます。

タブレットでの配置

タブレットで表示された場合のレイアウトは以下でした。

まずは、水平方向（列）の位置と範囲を指定します。

タブレットのレイアウトでは、ヘッダー、サイドバー、フッターは2列分のグリッドを範囲として持ち、ナビゲーションは1列目、メインコンテンツは2列目に配置されています。

これらをgrid-columnプロパティで指定する場合、以下のように記述します。

/* タブレットでのレイアウト（2列 × 4行） */
@media screen and (min-width: 768px) {
  .container { … }

  /* 水平方向の位置と範囲 */
  header,
  aside,
  footer {
    grid-column: 1 / 3;
  }

  nav {
    grid-column: 1;
  }

  main {
    grid-column: 2;
  }
}

header、aside、footerに対して、「grid-column: 1 / 3;」を指定しています。これにより、1列目から3列目（つまり2列分）が、これらのアイテムが持つグリッド範囲であることを定義しています。

また、navに対しては「grid-column: 1;」、mainには「grid-column: 2;」を指定しており、これらの記述によりどの列に配置するかを定義しています。

続いて、垂直方向（行）の位置と範囲を指定します。

ヘッダーは1行目、ナビゲーションとメインコンテンツは2行目、サイドバーは3行目、フッターは4行目に配置されています。

指定の仕方はgrid-columnとほぼ同じです。

/* 垂直方向の位置と範囲 */
header {
  grid-row: 1;
}

nav,
main {
 grid-row: 2;
}
    
aside {
  grid-row: 3;
}

footer {
  grid-row: 4;
}

これでタブレットでのレイアウトは完成です。

PCでの配置

PCで表示された場合のレイアウトは以下でした。

ヘッダー、フッターは3列分のグリッドを範囲として持ち、ナビゲーションは1列目、メインコンテンツは2列目、サイドバーは3列目に配置されています。

また、ヘッダーは1行目、ナビゲーション、メインコンテンツ、サイドバーは2行目、フッターは3行目に配置されています。

記述の重複を避けるためにタブレットとの差異を確認します。PCでは現状、以下のように表示されます。

列の数が増えたため、ヘッダーとフッターが画面幅いっぱいになっていません。

また、サイドバーが3行目に配置されており、PCのグリッドの3行目は100pxの高さしか持たないため、サイドバーがグリッドからはみ出しています。サイドバーとフッターの位置も変更しましょう。

以下のように記述します。

/* PCでのレイアウト（3列 × 3行） */
@media screen and (min-width: 992px) {
  .container {
 … }

  /* 水平方向の位置と範囲 */
  header,
  footer {
    grid-column: 1 / 4;
  }

  aside {
    grid-column: 3;
  }

  /* 垂直方向位置と範囲 */
  aside {
    grid-row: 2;
  }

  footer {
    grid-row: 3;
  }
}

これでPCでのレイアウトも完成しました。

3カラムレイアウトはフレックスボックスを使用しても行うことができますが、今回と同じようなレスポンシブ対応を含めるとHTMLのマークアップが少し複雑になったり、カラム落ちして表示が崩れる可能性があったりします。

グリッドレイアウトでのレイアウト構築は、レイアウト用のdivタグを最小限に抑えながら柔軟なレスポンシブ対応を行うことができます。

サンプルコード

最終的なサンプルコードは以下です。

HTML

<div class="container">
  <header>header</header>

  <nav>
    <h2>ナビゲーション</h2>
    <ul>
      <li>ホーム</li>
      <li>サービス</li>
      <li>メニュー</li>
      <li>お問い合わせ</li>
    </ul>
  </nav>

  <main>
    <h2>メインコンテンツ</h2>
    <p>メインコンテンツが入ります。</p>
  </main>

  <aside>
    <h2>サイドバー</h2>
    <section>
      <h3>期間限定メニュー</h3>
      <ul>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
      </ul>
    </section>
    <section>
      <h3>オススメのメニュー</h3>
      <ul>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
        <li>リスト</li>
      </ul>
    </section>
  </aside>

  <footer>footer</footer>
</div>

CSS

@charset "UTF-8";

/* =============================
基本設定
============================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* =============================
簡単なスタイリング
============================= */
nav,
main,
aside {
  padding: 16px;
}

header,
footer {
  font-size: 32px;
  font-weight: bold;
  line-height: 100px;
  text-align: center;
}

header {
  background-color: aliceblue;
}

nav {
  background-color: lavenderblush;
}

main {
  background-color: seashell;
  min-height: 300px;
}

aside {
  background-color: mintcream;
}

footer {
  background-color: cornsilk;
}



/* =============================
レイアウト
============================= */
.container {
  display: grid;
  grid-template-columns: 1fr;
}

/* タブレットでのレイアウト（2列 × 4行） */
@media screen and (min-width: 768px) {
  .container {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 100px auto auto 100px;
  }

  /* 水平方向の位置と範囲 */
  header,
  footer,
  aside {
    grid-column: 1 / 3;
  }

  nav {
    grid-column: 1;
  }

  main {
    grid-column: 2;
  }

  /* 垂直方向の位置と範囲 */
  header {
    grid-row: 1;
  }

  nav,
  main {
    grid-row: 2;
  }
    
  aside {
    grid-row: 3;
  }

  footer {
    grid-row: 4;
  }
}

/* PCでのレイアウト（3列 × 3行） */
@media screen and (min-width: 992px) {
  .container {
    grid-template-columns: 200px 1fr 240px;
    grid-template-rows: 100px auto 100px;
  }

  /* 水平方向の位置と範囲 */
  header,
  footer {
    grid-column: 1 / 4;
  }

  aside {
    grid-column: 3;
  }

  /* 垂直方向位置と範囲 */
  aside {
    grid-row: 2;
  }

  footer {
    grid-row: 3;
  }
}

最後に

グリッドレイアウトの基本的な概念と使い方について、グリッドを使用した3カラムレイアウト（聖杯レイアウト）の構築を例にして解説しました。

グリッドレイアウトは奥が深く、記述方法や扱うプロパティなども様々ですが、今回ご紹介したプロパティは基本となるものであり、これらのみでもグリッドレイアウトの構築は可能です。

グリッドレイアウトで実現できるレイアウトは多彩であり、ウェブページ全体のレイアウトだけでなくセクションなどのブロック単位で使用することも有効です。

グリッドレイアウトに興味を持った方は、いろんな使い方を調べてみると良いでしょう。