今日のテーマ

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

• レスポンシブのレイアウトグリッド
• アプリでも、Webサイトのデザインでも使えるグリッドの決め方がわかる
• 原典→黒字 自分の解釈→赤字

結論

1. Material Designでは、グリッドに従ってレイアウトを決めている
   • グリッドに従うことで、
     • デバイスのサイズが変わってもシームレスに対応できる
     • 画面レイアウト全体の一貫性を担保できる
2. レスポンシブレイアウトグリッドは、「①カラム」「②ガター」「③マージン」で構成される
3. Material Designでは、4列、8列、12列のグリッドに基づくレスポンシブレイアウトを提供し、さまざまな画面、デバイスで使用できる
4. 各ブレークポイント間で、列の数、及び各表示サイズの推奨マージンとガターを定義している

カラム・ガター・マージン

• レスポンシブレイアウトグリッドは、「①カラム」「②ガター」「③マージン」で構成される

カラム

• レスポンシブレイアウトでは、カラム幅は固定値ではなくパーセンテージで定義される
• パーセンテージで定義することで、コンテンツを任意の画面サイズに適応できる
• グリッドに表示される列の数は、**所定の画面サイズの範囲（幅？）**によって決まる