CSSグリッドレイアウトはどう進化していくのか？

今回はRachel Andrewさんの投稿をご紹介します。4年間でCSSグリッドレイアウトは大きな進化を遂げたといいます。これからCSSグリッドレイアウトはどう進化していくのでしょうか？

 

 

4年前、CSSスペシフィケーションに関する記事を書く機会がありました。まさか自分がCSSグリッドレイアウトについて4年間も調査・研究を行うことになるとは思いもしませんでした。

 

CSSグリッドレイアウトは4年前から大きな進化を遂げ、ChromeやFirefoxでも対応可能になろうとしています。

 

この記事では将来グリッドレイアウトでどんなことができるようになるのか、私なりに予想してみました。

 

サブグリッド―第１水準から外れる？

 

現時点で、サブグリッドだけは、どのブラウザでも実装されていない機能です。

 

See the Pen Nesting Grids by rachelandrew (@rachelandrew) on CodePen.

 

グリッドをネスティングするという手もあります。しかし、サブグリッド機能があれば親要素が指定したグリッドを子要素が関連付けて利用することができるようになります。

 

今年始めにサブグリッドのインプリメンテーションを目指しディスプレイプロパティのバリューを付与するスペシフィケーションが提案されました。

 

現時点ではサブグリッドを2次元的に使うことはできません。第1水準ではある種の“リスク”だとされています。第1水準から外れれば、サブグリッドも一方向に縛られずに済みます。

 

セル、トラック、エリアのスタイリングが可能に？

 

グリッドをCSSグリッドレイアウトで定義すると、そのグリッドに子要素を入れることはできてもトラックやセルのスタイリングはできません。

 

今のところ、セルに背景色をつけたいとき空白のHTML要素を加えたり下のように何らかのコンテンツを挿入する必要があります。

 

See the Pen Faked backgrounds and borders by rachelandrew (@rachelandrew) on CodePen.

 

背景や境界線、セルなどを直接、付け加えることができたら便利だと思いませんか？

 

自動配置が思いどおりに？

 

グリッド要素に直接、子要素の配置を明記しなかった場合は自動配置されます。

 

See the Pen Items auto-place on a defined grid by rachelandrew (@rachelandrew) on CodePen.

 

一部を指定し、残りは自動配置するなど、さまざまな活用ができるアルゴリズムは何かと便利です。

 

See the Pen Websafe colors meet CSS Grid (auto-placement demo) by rachelandrew (@rachelandrew) on CodePen.

 

この機能はもっと便利になりそうだと考えています。GitHubでも議論になっていたことですが、特定の名前の列にアイテムを配置できないでしょうか…

 

こうした機能があれば自動配置を使いグリッドの中のトラックを飛ばすことができそうです。

 

長方形以外のグリッドエリアができるように？

 

グリッドエリアは、セルの集合体で、かたちは長方形だと決まっています。

 

See the Pen Grid Areas by rachelandrew (@rachelandrew) on CodePen.

 

将来的には、下図のように長方形以外のグリッドを定義できるようになるかもしれません。

 

.wrapper {
  display: grid;
  grid-template-areas:
      "sidebar header  header"
      "sidebar content quote"
      "sidebar content content";
}

 

 

セルやエリアをまたいでコンテンツをフローできるように？

 

すべてのユースケースにグリッドレイアウトを使うと良いというわけではありませんが、ほかのCSSスペシフィケーションと並行してグリッドで作業を行うとやりやすいことも。特にセルやエリアをまたいでコンテンツをフローできると便利です。

 

キーボードとレイアウトの切断でマークアップとレイアウトの不一致が解決？

 

グリッドとフレックスボックスの問題点は、レイアウトがマークアップと一致しないときがあることです。これはキーボードを使った操作で起こりやすいです。

 

フレックスボックスとキーボードの切断は、グリッドレイアウトでは警告の対象です。

 

これを防ぐためには相当注意して作業しなければなりません。場合によっては、論理的な順序をソースに追従させ、ほかはビジュアルに準ずることが理にかなっていたりします。

 

本稿はWhat next for CSS Grid Layout？を翻訳・再編集したものです。