実務でCSS Gridを使う

CSS Gridを使用すると、フレキシブルなレイアウトが実現できるという点もさることながら、マークアップがシンプルになるという点が大きなメリットであると筆者は考えていますが、IE・Edgeでは基本的なプロパティしか使えないこともあり、実務で使うことには躊躇していました。

また、デザイナーの方がこのプロパティのことを熟知した上で、このプロパティを使ってこそ実現可能な「フレキシブルなレイアウト」のデザインを仕上げてくる可能性は、筆者のこれまで働いてきた現場においては著しく低いであろう、とも考えていました（なにしろデザイナーの方々のほとんどがコーディングにはホボ興味のなさそうだったので…）。ですので実務で使用する機会はまだまだ先かと考えていました。

今回関わった案件は、一見ごく普通にメインコンテンツとサイドバーで構成されるものであるように見えました。が、2つ目以降のセクションのヘッダーの背景が横方向に永遠に広がっています。サイドバーがなければよくあるデザインで、何も悩むことなく実現できますよね。

セクションのヘッダーのデザインは背景画像が異なるだけでいずれも似たようなものでしたが、1つ目のセクションはサイドバーがあるためか、背景は横方向に伸びておらず、メインコンテンツの領域に収まっています。

まず安易に思いついたのが、1つ目のセクションとサイドバーをタグで囲んで一つのブロックとし、残りのセクションをその後に続けるというもの。これでデザイン通りのレイアウトは実現できますが、セクションの間にページ全体のaside要素たるべきサイドバーが挟まれてしまい、コンテンツの記述順序が気持ち悪いことに。

<div>
  <section>セクション1</section>
  <aside>サイドバー</aside>
</div>
<section>セクション2</section>
<section>セクション3</section>

その前に…CSS Gridを使用しない時は以下のCSSを記述するよう指定されています。

.main {
  float: left;
  max-width: 740px;
  width: 74%;
}
.side {
  float: right;
  max-width: 220px;
  width: 22%;
}

中央寄せされた1000pxのコンテナの中にメインコンテンツ740px、サイドバー220pxで配置されています。両者の間は40px。1000px以下の時は74%、22%が要素の幅になります（ホントはdisplay:flexトカ使いたいけど、ココの記述は変えるなって言われている…マークアップの精度を気にしない割には古いやり方に固執するクライアントさん(^_^;)）。

マークアップはとてもシンプル！

<div class="grid">
 <section class="sec01">セクション1</section>
 <section class="sec02">セクション2</section>
 <section class="sec03">セクション3</section>
 <aside class="side">サイドバー</aside>
</div>

さしあたってIE・Edgeのことは無視して、次のようにCSSを記述しました（省略できるプロパティは極力省略しています）。

.sec01 {
  grid-column: 2;
}
.sec02 {
  grid-row: 2;
  grid-column: 1 / -1;
}
.sec03 {
  grid-row: 3;
  grid-column: 1 / -1;
}
.side {
  grid-column: 4;
}

すると次の図のようなレイアウトに！

次に、セクション2,3内のヘッダーとコンテンツの要素もグリッドコンテナとします。すなわちグリッドコンテナを入れ子にします。それぞれの中にグリッドアイテムを配置していきます。

マークアップはこんな感じ。グリッドコンテナのトラックの幅は先に定義したものと同じなので、gridというクラス名を再び使用します。

<section class="sec02">
  <header class="grid">
    <h2 class="grid_item">セクション2のヘッダー</h2>
  </header>
  <div class="grid">
    <div class="grid_item">セクション2のコンテンツ</div>
  </div>
</section>

グリッドコンテナ内の要素には先に定義したセクション1と同じルールセットを記述をすれば良さそうです。

.grid_item {
    grid-column: 2;
}

そしてセクションのヘッダーに背景色をつければ、横方向に永遠に広がってくれます。