最終回 注意すべきポイントと使い分け
Grid Layoutを実装する際の注意すべきポイントを解説します。これを知っておき、無駄にハマって時間を浪費することのないようにしましょう。また、似たようなレイアウトができるFlexboxとの使い分けについてまとめておきます。
第5回 Grid Layoutの使いどころ
Grid Layoutが活きるデモを通して、この手法の使いどころを探っていきましょう。一見、複雑そうなレイアウトが、シンプルな指定で実現できます。雑誌風のレイアウト、汎用性の高いGrid systemライクな実装を解説します。
第4回 よくあるレイアウトを組む
実務で比較的よく出会うレイアウトをGrid Layoutで組んでみます。Grid Layoutは若干複雑ではありますが、スタイルを分離し、HTMLの構造をシンプルに保ちやすいことがわかるでしょう。
第3回 自動配置と余白取り
方眼状のグリッドとグリッドアイテムのサイズをいちいち考えるのは面倒です。サイズを合わせながら自動で配置したり、均一に余白を取る指定などを解説します。
第2回 グリッドアイテムの配置
グリッドコンテナとグリットアイテムにより、グリッドレイアウトは成り立ちます。今回は、グリッドの任意の場所にアイテムを配置するためのさまざまな概念、プロパティについて解説します。
第1回 Grid Layout Moduleの概要
まずはdisplay:grid;を核とするGrid Layout Moduleがどのような仕様か、その概要を紹介します。さらに、指定の基本となるグリッドコンテナとグリッドアイテムという概念ついて解説をします。