新しいCSSのGrid Layoutはウェブページのレイアウトに役立ちます。従来FloatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるものもあるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。Float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を生かし使い分けていくことで、よりシンプルでわかりやすくレイアウトをつくることができます。本記事では、Float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。

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

Float、Flexbox、Grid Layoutの特徴

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

Float

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

Flexbox

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

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

Grid Layout

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

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

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

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

全体のレイアウト

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

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

ナビゲーションアイテムの横並び

ナビゲーションには Flexboxを使っています。幅が決まっていないアイテムを均等に整列させるときはFlexboxが便利です。ここでは、display: flexでアイテムを横並びにし、align-itemsでアイテムの上下方向の位置を揃え、justify-content: space-around で余白を割り振っています（実務でjustify-content: space-aroundを使うことはあまりありませんが、モックなどで適当な余白をつけるとき筆者はたまに使用します）。

セクション1のテキスト回り込み

セクション1のテキストを回り込ませるレイアウトではFloatを使っています。FlexboxやGrid Layoutでもテキストが回り込んでいるような見た目に近づけることはできますが、回り込ませることができるのはfloatの特徴です。特別な理由がなければ、回り込みはFloatでレイアウトすると考えてよいでしょう。

セクション2のタイルレイアウト

セクション2は前回の記事で紹介したようなタイル状のレイアウトにGrid Layoutを使っています。このようなレイアウトはFloatでもFlexboxでもつくることができますが、grid-row(column)-gapを使うことでグリッド間の余白を簡単に調整できることや、名前の通りグリッド（=格子）のレイアウトであるため筆者はGrid Layoutを使いました。またGrid Layoutではauto-fillやminmaxが使えるため、レスポンシブサイト等の幅が伸縮するレイアウトの調整がしやすくなります。

サンプルのまとめ

紹介したレイアウトのつくり方や説明は筆者の考えたもので、正しいとは限りませんが次のような考え方をもとに使い分けをしています。

  • ページ全体のレイアウトでは、ページを大きなエリアに分割したレイアウトをするため Grid Layout
  • ナビゲーションでは、 列の中でアイテムを整列させ、アイテムの上下方向の位置を揃えるため Flexbox
  • セクション1では、画像にテキストが回り込むレイアウトをするため Float
  • セクション2では、格子状に並びアイテム間の余白をとったレイアウトをするため Grid Layout

Floatは回り込み、Flexboxは整列、Grid Layoutは分割・格子などプロパティの特徴をキーワードとして覚えておくと使い分けの判断がしやすいかもしれません。

おわりに

Float、Flexbox、Grid Layoutを使わず、テーブルレイアウトや要素をインラインにしても要素を横並びにはできます。レイアウトをつくる方法がいろいろある中で、プロパティをどう使い分けるかはつくる人の考え方やレイアウトのつくり方によって異なるでしょう。

筆者は、CSSプロパティの特徴を知ることが適切な使い分けの判断に役立つと考えます。W3CのCSS仕様やCSS-Tricksの「All About Floats」、MDNの「CSS flexible box の利用 – CSS」は今回紹介したFloat、Flexbox、Grid Layoutを使う上で参考になるので是非読んでみてください。

「FloatやFlexboxはレイアウトに使う手法として古い」「Grid Layoutという新しいやり方でレイアウトするのがかっこいい」というわけではありませんので、プロパティの特徴を知り適材適所で使っていくのが望ましいでしょう。