响应式网格设计：终极指南（一）

网格由3个主要组件组成，包括列（columns）、槽（gutters）和边距（margins）。

列

列是虚构的垂直块，用于对齐内容。我们以百分比（%）或固定值定义列宽度。

槽

槽是列之间的空格。排水沟有助于分离内容。我们将排水沟宽度定义为固定值。

边距

页边空白是内容和屏幕边缘之间的空间。 

我们将边距宽度定义为固定值，用于决定每个屏幕尺寸的最小呼吸空间。

柔性边距占用了用列、槽和边距组成网格后剩余的空间。

灵活的页边空白会随着屏幕尺寸的变化而变化。

如何使用响应网格设计界面？

内容（图像、文本或UI元素）包裹在可见或不可见的父容器中。可见容器有边框或填充块，而隐形容器有透明的块。

可见的父容器包括卡片、横幅等组件。

不可见的父级容器包括文本或功能块等部分。

父容器在列的边缘开始和结束。父容器永远不能在槽或侧边边缘开始或结束。

父容器中的内容是独立放置的，并且必然与列不对齐。

···