仕様解説
これからのグリッドレイアウト
6

Grid Layoutを実装する際の注意すべきポイントを解説します。これを知っておき、無駄にハマって時間を浪費することのないようにしましょう。また、似たようなレイアウトができるFlexboxとの使い分けについてまとめておきます。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

Grid Layoutが活きるデモを通して、この手法の使いどころを探っていきましょう。一見、複雑そうなレイアウトが、シンプルな指定で実現できます。雑誌風のレイアウト、汎用性の高いGrid systemライクな実装を解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

実務で比較的よく出会うレイアウトをGrid Layoutで組んでみます。Grid Layoutは若干複雑ではありますが、スタイルを分離し、HTMLの構造をシンプルに保ちやすいことがわかるでしょう。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

方眼状のグリッドとグリッドアイテムのサイズをいちいち考えるのは面倒です。サイズを合わせながら自動で配置したり、均一に余白を取る指定などを解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

グリッドコンテナとグリットアイテムにより、グリッドレイアウトは成り立ちます。今回は、グリッドの任意の場所にアイテムを配置するためのさまざまな概念、プロパティについて解説します。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア

まずはdisplay:grid;を核とするGrid Layout Moduleがどのような仕様か、その概要を紹介します。さらに、指定の基本となるグリッドコンテナとグリッドアイテムという概念ついて解説をします。

坂巻 翔大郎
坂巻 翔大郎 | フロントエンド・エンジニア