背景
响应型栅格布局可适应屏幕尺寸和方向，确保布局的一致性。
构成
Material Design 的栅格布局由列（columns）、沟（gutters）和边距（margins）构成。
- Columns
- Gutters
- Margins
列（columns）
内容被放置在包含列的屏幕区域中。
列宽最好使用百分比而不是固定值来定义，以允许内容灵活地适应任何屏幕大小。
网格中显示的列数由查看屏幕的断点范围(预定屏幕大小的范围)决定，无论是移动设备、平板电脑还是其他大小的断点。
沟（gutters）
沟是列之间的空间。它们有助于分离内容。
沟的宽度是每个断点范围内的固定值。
为了更好地适应屏幕，沟的宽度可以在不同的断点处改变。
较宽的沟更适合较大的屏幕，因为它们会在列之间产生更多的空白。
在 360 dp 的移动端上，这个沟宽度为 16dp 。
在 600 dp 的平板电脑上，这个沟宽度为 24dp 。
边距（margins）
边距是内容和屏幕两端之间的空白部分。
边距宽度定义为每个断点范围的固定值。
为了更好地适应屏幕，边距宽度可以在不同的断点处改变。
较宽的页边距更适合较大的屏幕，因为它们会在内容周围产生更多空白。
在 360 dp 的移动端上，这个边距宽度为 16 dp 。
在 600 dp 的平板电脑上，这个边距宽度为 24dp 。
定制栅格布局
可以调整页边距以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。
正文的理想易读长度是每行 40 - 60 个字符。
此布局网格使用小的 8 dp 边距，以允许图像在布局中占据更多空间。
此布局网格使用大的 64 dp 边距来限制内容的宽度。
在同一屏幕下，gutter 和 margin 的宽度可以不同。
- 32dp margins
- 8dp gutters
断点（Breakpoints）
断点是具有特定布局要求的预定屏幕尺寸范围。在给定的断点范围内，布局会根据屏幕大小和方向进行调整。
Material Design 使用 4 列、8 列和 12 列栅格的布局可用于不同的屏幕、设备和方向。
断点建议
iOS 下的断点
布局行为
流体布局（Fluid grids）
流体布局使用缩放和调整内容大小的列。
流体布局的布局可以使用断点来确定布局是否需要显著改变。
固定布局（Fixed grids）
固定布局使用固定大小的列，在每个断点范围内保持内容不变。
固定布局只能在指定的断点处改变。
空白框架（Whiteframes）
在设计时使用空白框架来代替具体的内容。
参考
https://material.io/design/layout/responsive-layout-grid.html#whiteframes
网友评论