列结构

8、12、16和20是响应式布局中最常见的一些列结构。您为项目选择哪个列结构取决于您的设计要求。

断点

断点是布局重新调整到可用屏幕大小以获得最佳布局视图的特定屏幕尺寸范围。

列结构、列宽度、排水沟宽度和边距取决于断点。父容器根据不同的断点堆叠或缩放，以重新调整以获得最佳视图。

如果较小的屏幕有足够的可用空间来适应内容，则列的大小会缩小。如果内容无法在较小屏幕上的可用空间内，列将垂直堆叠。

固定网格

固定布局具有固定宽度列和灵活的边距。固定网格有一个固定的内容宽度，在特定的断点范围内不会发生变化，灵活的边距占据了剩余的空间

流式或全宽度网格

流式布局有流式宽度的列、固定的槽和固定的边距。流式网格具有灵活的内容宽度，可以根据屏幕大小从一边到边缘。

在流式布局中，列要么拉长，要么收缩，以适应可用空间。

混合网格

混合布局同时具有流式宽度和固定宽度组件

如果内容宽度大于可用屏幕大小，固定布局将戏剧性地变成一个流式布局，适应屏幕上的整个可用空间，以充分适应内容。

桌面视图

除非不是故意的，或者你知道你在做什么，否则你永远不应该以1440×900、1600×900或1920×1080等大分辨率进行设计。

1280×800是最小的桌面分辨率。1280×800设计的流体和固定宽度布局都可以简单地适应更大的屏幕，但反向方法变得相当复杂。

固定宽度布局网格设置

为了设置固定宽度网格，我们对槽和列使用固定数字值。我建议两侧有74px列、32px宽槽和16px侧边距。

74px宽的列和32px宽的槽导致1240px宽内容宽度（不包括两侧16px侧边距，即1272px），从而利用了可用的最大屏幕尺寸。

在不同断点，当固定宽度布局的内容宽度大于当前屏幕大小时，固定宽度网格开始表现为流式网格。

流体布局网格设置

为了设置流体宽度网格，我们对排水沟使用固定数值，对列使用自动计算值（以%为单位）。

流式布局网格使用整个屏幕大小作为主要内容宽度，并在两侧留下16px的边距。

移动视图

对于移动设备，我们使用流体网格，其中槽和边距具有固定的数字值。我建议双方有16px宽的槽和16px宽的边距。

我们可以在360×640大小的画板上设计移动界面。

移动设备的屏幕分辨率很小。如果我们以如此小的分辨率显示12个单独的列、槽和边距，大规模设计会变得相当麻烦。

因此，我们将列合并到3个组中，以创建4个宽列，保持布局网格光滑方便，从而做出快速对齐决策。

平板电脑视图

我们为平板电脑设置网格的方式与移动设备的方式非常相似。我建议两侧有32px宽的槽和16px宽的边距。

我们可以在768×1024尺寸的画板上为平板电脑设计界面。

您可以选择将列合并到一组2中，以创建6个宽列，从而实现干净方便的网格设置。

布局变化

网格布局变化决定了布局的主要内容结构。我们使用不同的网格布局变化来满足不同的布局要求。

几个页面级别的容器包装主要内容宽度。

用于包装主要内容的页面级容器的数量决定了布局的变化。

一列布局

一列布局或全宽度布局变化是登陆和引导页面最受欢迎的风格之一。

我们可以合并12列来创建一个单独的列父容器，也可以将12列分发到父容器组中。

但一切都只包装在一个页面级别的容器中。

两列布局

两列布局有两个页面级容器。一般来说，与另一个页面级容器相比，一个页面级容器共享的列权重更多。

在两列布局中，列分布在9-3或8-4父容器中，以创建主要内容宽度。

带有单个边栏的接口是两列布局的绝佳示例

三列布局

三列布局有三个页面级容器。与其他两个页面级容器相比，一个页面级容器共享的列权重更多。

 在三列布局中，列分布在3-6-3或2-8-2父容器中，以创建主要内容宽度。

带有两个边栏的接口可以是三列布局的快速示例。

固定宽度边栏布局

固定宽度边栏布局的功能略有不同。

边栏宽度固定在一组断点范围内，剩余空间由固定宽度或流体宽度容器占用。

带有固定边栏的仪表板是固定宽度边栏布局的完美示例。