新しいCSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来FloatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。

Float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、Float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。

Grid Layoutの基本については前回の記事「CSS Grid Layout入門」を参照ください。

この記事で学べること
・ページ全体のレイアウトはGrid Layoutが適してる
・横並びのレイアウトはFlexboxが適してる
・格子状のレイアウトはGrid Layoutが適してる
・テキストが回り込みの指定はFloatが適してる

Float、Flexbox、Grid Layoutの特徴

まず、簡単にFloat、Flexbox、Grid Layoutの特徴を見てみましょう。

Float

floatleftrightを指定された要素は、その包含ブロックの左・右に浮動し、後続する要素は回り込みます。印刷物でよくあるような、写真にテキストが回り込むようなレイアウトをつくれます。

Flexbox

要素を整列させます。整列する方向や整列順、整列の折り返しの指定が可能で、整列した要素を伸縮することもできるので、ウェブアプリで必要とされるUIのレイアウト(ツールバーなど)に役立ちます。

Flexboxについて詳しくは、記事「初心者でも始められるFlexbox入門」を参照ください。

Grid Layout

テーブル組みのように揃った行・列に要素を配置します。要素の順番やフローは無関係に、要素の配置される位置を指定できます。ページの領域を分割するようなレイアウトに役立ちます。

手法を使い分けてレイアウトする

Float、Flexbox、Grid Layoutの特徴を理解したところで、実践的なサンプルを通して使い分けを考えていきましょう。

上図のようなシンプルなウェブサイトのレイアウトをつくっていきます。アイテムのHTML記述は、タイトル、ナビゲーション、セクション1、セクション2、サイドバー、フッターの順番です。次のデモも合わせてご覧ください。

全体のレイアウト

ページ全体のレイアウトはGrid Layoutでつくります。Grid Layoutはページ全体など、ある程度大きな領域を分割するのに向いています。Grid Layoutを使うことで、全体のレイアウトに関わるCSSをグリッドコンテナにまとめて指定できるというメリットもあります。

grid-column-endspan 2という値を指定しています。これはgrid-column-startの位置から数えて2本後の列のグリッドラインまでグリッドアイテムを配置するという指定です。

グリッドアイテムの終了位置をグリッドラインで指定せず、開始位置からの距離で指定するほうがレイアウトをつくりやすいので覚えておくと便利でしょう。もちろん、開始位置(grid-column-start)もspanを使って終了位置からの距離で指定できます。grid-row-end(start)のときも同じです。

次のページでは横並びや格子状のレイアウトの考察をしていきます。