ただいま新デザインバージョンのプレビュー中です。旧バージョンはこちら。不具合等はお問い合わせより報告お願いいたします。

これからのグリッドレイアウト

全6回

まだブラウザへの実装は不完全ですが、CSSではグリッド、つまり方眼紙のような四角を基調とする基準線に合わせてレイアウトを行える仕様があります。このシリーズでは、そのグリッドレイアウトの仕様と実装を2016年2月現在の情報に基づいて解説します。

第1回を読む

最終回 注意すべきポイントと使い分け

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がどのような仕様か、その概要を紹介します。さらに、指定の基本となるグリッドコンテナとグリッドアイテムという概念ついて解説をします。