当您第一次看到 的移动网格时

doreamon999

您可能会认为复合网格实施起来具有挑战性。虽然使用传统方法开发复合网格是一个复杂的过程，但今天的布局工具（包括网格）现在使其变得简单。 使用复合网格设计布局需要改变您的思维模型，开发它们也不例外。然而， 网格行数与新的灵活长度单位 () 相结合将使这种转变更加平滑。 按照我之前使用的顺序，我将从两列和三列网格 (+) 的复合开始，其节奏模式为 |||。 设计实例 （大预览） 将该模式转换为 -- 的值再简单不过了，但首先我需要将 应用到页面的元素，然后在列之间设置相对于视口宽度的间隙。由于我不希望在较小的屏幕尺寸上应用这些样式，因此我将它们包含在媒体查询。

中：复制 现在，我使用单位来指定复合网格的模式。结果是四列，其中外部列的宽度占据内部两列空间的两倍复制 设计实例 （大预览） 三列和四列网格 (+) 的组合将产生六列和 ||||| 的节奏模式。我的灵活长度单位是：{ --:; } 复制 设计实例 （大预览） 最后，组合四列和六 Whatsapp 号码列表 列网格 (+) 创建八列，其中两列比其余的窄得多。要创建 |的节奏模式，我的灵活长度单位将是：{ --:; } 复制 应用这些网格属性后，网格容器的所有直接后代都将成为网格项，我可以使用区域、行号或名称来放置网格项。 我正在开发的设计只需要最基本的结构元素来实现它，我的标记如下所示：复制 我使用上面 + 复合网格中的八列。以下是实现该功能的样式： 复制 上面的元。



素是的直接后代。我使用行号将它们放置在网格上。首先是标题，然后是紧随其后的段落，最后是我的主要元素。这些元素都从网格线开始，到第行结束： ,+ ,{ -:/ ; } 复制 我美丽的捷豹 - 的蓝图图像应该比此设计中的其他元素更宽，因此我使用不同的行号放置它。它从第行开始并延伸到我页面的整个宽度：{ -:/ -; } 复制 现在，我放置了元素，其中包含有关 - 三个系列的支持信息。由于我希望此元素与布局的底部对齐，因此我添加了值为的- 属性：{ -:/ ; -: ; } 复制 最终实例设计 （大预览） 最后，由于我希望元素和元素在同一行中彼此相邻出现，因此我给它们提供了相同的行号值： ,{ -: ; } 复制 剩下的就是添加一些小的印刷修饰来改进我的设计。我不需要展示类属性值来设置段落的样式，该段落紧随我的标题。我可以使用相邻的同级选择器来代替：+{ -: ; } 复制 为了设置主元素中第一段的第一行的样式，我使用了后代。