CSS 2018.10.27

CSSのGridレイアウトをマスターするためのまとめ（基本編：マルチカラムレイアウト）

Tags： CSS3,HTML5

前回記事「CSSのGridレイアウトをマスターするためのまとめ（各種プロパティ編）」ではCSSのGridレイアウトの基本ということで各種プロパティや使い方などを中心にまとめていきましたが、今回は実際のGridレイアウトを使ってウェブサイトのレイアウトによくある2カラムや3カラムといったマルチカラムレイアウトを作ってみたいと思います。

2次元方向への要素の配置に適したGridレイアウト

インラインやFlexboxの場合は一方向へ成り行きに配置されていきますが、Girdレイアウトは縦横どちらの方向へも自由に配置指定が可能です。どちらかというとテーブル要素と似ているのですが、テーブルの場合はセルの並びや位置などの制約がありますが、Girdレイアウトの場合はあくまでグリッド状に要素を配置するだけですので、変則的なレイアウトを実装することも可能です。

Gridレイアウトで作る2カラムレイアウトのサンプル

メインとサブに分かれた、ウェブサイトでよくあるような2カラムのレイアウトもGridレイアウトで簡単に実装することができます。

【HTML】※一部省略

<div class="grid-container">
  <header class="gird-item">
    <!-- ヘッダーエリア -->
  </header>
  <main class="gird-item">
    <!-- メインコンテンツエリア -->
  </main>
  <aside class="gird-item">
    <!-- サイドバーエリア -->
  </aside>
  <footer class="gird-item">
    <!-- フッターエリア -->
  </footer>
</div>

【CSS】

.grid-container {
  display: grid;
  display: -ms-grid;
  grid-template-rows: 80px 1fr 200px;
  -ms-grid-rows: 80px 1fr 200px;
  grid-template-columns: 75% 25%;
  -ms-grid-colums: 75% 25%;
}
header.grid-item {
  grid-row: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}
main.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}
aside.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 2 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
}
footer.grid-item {
  grid-row: 3 / 4;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-column: 1 / 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

親要素にGirdレイアウトを指定し、子要素にGird上での配置場所を指定します。frという単位は各列行の合計における残りの幅や高さを示します。

ここではgird-row及びgird-columnプロパティでレイアウトを指定しています。3行2列になるのでグリッド上のラインとしては、行（row）が4つ、列（column）が3つとなります。それぞれの開始点と終了点をスペースとスラッシュで区切ります。

2カラムレイアウトのサンプルはこちらに用意していますので参考に。

Gridレイアウトで作る3カラムレイアウトのサンプル

先ほどの2カラムレイアウトと同じような感じで、3カラムのレイアウトも簡単に実現できます。グリッド上のラインが増えるのでそれに合わせて指定するだけです。

【HTML】※一部省略

<div class="grid-container">
  <header class="gird-item">
    <!-- ヘッダーエリア -->
  </header>
  <nav class="gird-item">
    <!-- ナビゲーションエリア -->
  </nav>
  <main class="gird-item">
    <!-- メインコンテンツエリア -->
  </main>
  <aside class="gird-item">
    <!-- サイドバーエリア -->
  </aside>
  <footer class="gird-item">
    <!-- フッターエリア -->
  </footer>
</div>

【CSS】

.grid-container {
  display: grid;
  display: -ms-grid;
  grid-template-rows: 80px 1fr 200px;
  -ms-grid-rows: 80px 1fr 200px;
  grid-template-columns: 15% 60% 25%;
  -ms-grid-colums: 15% 60% 25%;
}
header.grid-item {
  grid-row: 1 / 2;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-column: 1 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}
nav.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 1 / 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
}
main.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 2 / 3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
}
aside.grid-item {
  grid-row: 2 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-column: 3 / 4;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
}
footer.grid-item {
  grid-row: 3 / 4;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-column: 1 / 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

2カラムから3カラムと1列増えたので、それに合わせて値も調整する形になります。基本的には同じ方法ですね。

エリア名で指定したレイアウトのサンプルはこちらに用意していますので参考に。

また、上記の方法はグリッドのラインを基準に位置を指定しましたが、それぞれのグリッドに対して名前をつけて視覚的に位置を設定することも可能です。その場合には、親要素にgrid-template-areasのプロパティでエリア名を一括登録し、子要素にgrid-areaのプロパティで下記のようにエリアを要素に紐付けます。

【HTML】※一部省略

<div class="grid-container">
  <div class="gird-item">
    <!-- エリア1 -->
  </div>
  <div class="gird-item">
    <!-- エリア2 -->
  </div>
  <div class="gird-item">
    <!-- エリア3 -->
  </div>
  <div class="gird-item">
    <!-- エリア4 -->
  </div>
</div>

【CSS】

.grid-container {
  display: grid;
  grid-template-rows: 150px 1fr 150px;
  grid-template-columns: 50% 50%;
  grid-template-areas:
    "area1 area1"
    "area2 area3"
    "area4 area4";
}
.grid-item:first-child {
  grid-area: area1;
}
.grid-item:nth-child(2) {
  grid-area: area2;
}
.grid-item:nth-child(3) {
  grid-area: area3;
}
.grid-item:nth-child(4) {
  grid-area: area4;
}

grid-template-areasのプロパティで行ごとに見た目のレイアウトと同じようになるよう、エリア名を決める形になります。また列は半角スペースで区切ります。この時のエリア名は自由に設定できます。そして、子要素のgrid-areaプロパティでエリア名を紐付けます。値が見た目と同じようになるのでイメージしやすいですね。サンプルはこちらです。

いかがでしょうか、基本的なマルチカラムの場合ですとややこしいイメージのあるGirdレイアウトでも簡単に実装することができます。Flexboxレイアウトとの使い分けることで効果的にコーディングできそうですね。

（参考にさせて頂いたサイト）
CSS Grid Layout を極める！（基礎編）