BLOG

CSS grid Layout を取り入れていくための個人的なまとめ。IE対策など

CSSレイアウトの新しい概念であるCSS Grid レイアウト。
HTMLを入れ子の構造にする必要がなく、HTMLをより簡潔に記述することができる上、より柔軟なレイアウトを構築することができます。
今後積極的に取り入れていきたいので、今回はCSSGridの基本的なプロパティや要点について個人的にまとめてみました。

ブラウザのサポート状況について

やはりここがグリッドレイアウト導入の一番のネックになります。
Caniuseで調査してみるとIEはプレフィックス(-ms-)の付与が必要ですが、一応サポートしているようです。ここはAutoprefixerを使用してコーディング時に自動で付与するようにします。

またAndroidはバージョン5未満はサポートされていません。もしIE11未満やレガシーなAndroidOSを閲覧環境に含めるのであれば、CSSGridの使用は見送りましょう。

https://caniuse.com/#search=CSS%20Grid%20Layout

IE11でCSSGridを使用するためには

その1:ベンダプレフィックスを付与する

IE11でCSSGridを使用するには以下のIE用プロパティを使用しましょう。また使用できるプロパティが限られています。下記に書いてあるプロパティ以外の指定は行わないような記述をする必要があります。

  • display: -ms-grid
    グリッドコンテナの作成(display: grid)
  • -ms-grid-rows
    グリッドコンテナの行のサイズを作成( grid-template-rows )
  • -ms-grid-columns
    グリッドコンテナの列のサイズを作成(grid-template-columns)
  • -ms-grid-row
    使用するグリッド行の開始位置を指定(grid-row-start)
  • -ms-grid-column
    使用するグリッド列の開始位置を指定( grid-column-start )
  • -ms-grid-row-span
    使用するグリッド行のコンテナ数を指定
  • -ms-grid-column-span
    使用するグリッド列のコンテナ数を指定
  • -ms-grid-column-align
    コンテナの中の横方向の位置揃えを指定( justify-self)
  • -ms-grid-row-align
    コンテナの縦方向の位置揃えを指定( align-self )

その2:コンテナの数え方に注意

IEとその他のモダンブラウザではコンテナの数え方の解釈が異なります。モダンブラウザではコンテナの指定に「コンテナ間の境界線」を使用しますが、IEは「コンテナボックスそのもの」を使用します。

ややこしいのですが、図で示すとこんなかんじです。

モダンブラウザはいわゆる「罫線」の位置でコンテナを指定しますが、IEだとコンテナそのものの位置を使って指定します。そのため、「コンテナの位置(-ms-grid-column、-ms-grid-row)」と「どのエリアまでコンテナを広げるか(-ms-grid-column-span、-ms-grid-row-span)」を指定する必要があります。
解釈が違うため、書き方が複雑になります。
このあたりもAutofixerを使用すれば補完してくれるそうです。

その3:IE11では<main>タグはGridレイアウトが効かない

Main要素がグリッドの子要素としてサポートされていないため、基本グリッドレイアウトを実装する場合にネックとなります。

解決方法としては、Gridの指定をmain要素に対して行わず、role=”main”を付与したdiv要素をグリッドの子要素として使用します。
CSSのセレクタは[role=main]とすると良いです。

以上、IE11でCSSグリッドレイアウトを使用する際の注意点でした。

CSSグリッドレイアウトを作成する際の主要なプロパティ

グリッドテンプレート(grid-template)

親要素に基本となるグリッドを定義します。
行はgrid-template-rows、列はgrid-template-columnsプロパティを使用します。またrowとcolumnをまとめて[ grid-template: ]プロパティで定義可能。その場合の記述方法は

となります。
ただしこの書き方でrepeat(3, 1fr)といった”repeat”を使用した指定のやり方はできないので注意が必要です。

https://developer.mozilla.org/ja/docs/Web/CSS/repeat

複雑になりそうならrowとcolumnで2行に分けたほうが良いですね。
グリッドそのものに名前をつけることも可能だけど、多分この書き方はコードが煩雑になりそうなので私は採用しないと思います。よってそのあたりの説明は割愛。

グリッドの余白指定 grid-gap

グリッドの余白を指定することができます。
ちなみに現在は[gap:]が余白を指定するプロパティだそうなのですが、多くのブラウザがサポートしていないため、元々使用されていた接頭辞付きのプロパティ[grid-gap:]を指定する必要があります。

行の余白はgrid-row-gap,列の余白はgrid-column-gapで指定可能。一括指定はgrid-gap: [y] [x]; で指定可能です。

グリッドの繰り返し grid-auto-flow

グリッドで指定された子要素がテンプレートをはみ出た場合にどの位置でrepeatさせるかを指定します。 ※IEサポート対象外。

テンプレートに沿ったグリッドの指定

template-grid-columns, template-grid-rowsで定義したテンプレートに沿って大きさを指定することができます。

とりあえずこれで大まかなレイアウトは組める。位置揃えなどの細かい指定もありますが、都度MDNなどを確認すると良い。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout