M2

M3

3つの構成要素（Columns, gutters, margins)

Column

• カラムの横幅は固定値ではなく、%で指定される。%で定義することで、様々なコンテンツ幅に対応することが出来る。

• グリッドに表示されるカラムの数は、ブレイクポイントの範囲で予め定められている。

  • スマホ：ブレイクポイント360dp。カラムは4つ。

  • タブレット：ブレイクポイント600dp。カラムは8つ。

Gutters

• ガターはカラム同士内にあるスペースのことで、コンテンツを分ける際に役立つ。

• ガターの横幅は固定値を持つ。また、各画面サイズに適用させるために、ブレイクポイントごとにガターの横幅は変更することが可能。

• ガターの幅は、カラムと同等あるいはそれ以上の大きさにしてはならない。

Margins

• マージンは右端と左端に設置されるもの。

• マージンの横幅は固定値、あるいはスケーリング値を持つ。また、ブレイクポイントごとに横幅を変更することが可能。

• ガター同様、各画面サイズに適用させるために、ブレイクポイントごとに横幅は変更することが可能。