常规的网格布局习惯填满所有单元格，但这种“满版”设计往往显得呆板。在 Divi 5 中，刻意留白能引导视线流动，让构图更具张力。借助 CSS Grid 的网格偏移规则（Grid Offset Rules）用户不必依赖复杂的代码，即可精准控制元素位置，让特定单元格保持空置，这样创造出富有节奏感的视觉布局。
本教程将演示如何在八列网格上构建四张卡片。通过让每张卡片的起始位置向右递进，且占据的列数逐张减少，最终在左侧形成一个阶梯状的留白区域，打破对称的单调感。
为何选择偏移规则而非传统间距
虽然占位模块、外边距或列跨度都能制造空白，但它们提供的控制维度截然不同。
若直接在网格容器内添加一个空的组合模块作为占位符，该模块会被视作网格项。这会改变后续元素在序列中的索引位置，可能导致基于索引的样式规则失效或错位。
使用固定像素值的外边距（如 240px）虽然简单，但当容器宽度响应式变化时，这种固定间距无法跟随网格轨道对齐，容易破坏布局的严谨性。
列跨度决定元素覆盖的轨道数量，对齐方式决定元素在网格区域内的具体位置，而网格偏移规则则将这些控制合并。比如说，第二张卡片可以设定从第 3 条网格线开始，横跨 6 列。其左侧的两列空间自然留白，无需任何额外占位元素，既精准又高效。
初始化区域设置
新建一个区域（Section），并插入一个使用单列 Flex 结构模板的行（Row）。在构建卡片内容阶段，保持行的布局样式为 Flex。这为后续调整内部内容和样式提供了足够的灵活性，待卡片构建完成后再切换为网格结构。
将区域的背景色设为 #F0EDE4并将CSS ID 设置为 work。这个锚点 ID 将用于后续卡片按钮的链接示例。
构建基础卡片结构
每张卡片本质上是一个位于独立列内的组合模块。当行布局切换为网格后，这些列将直接转化为网格项。
在第一个列内添加组合模块，将其元素标签命名为 Card 1并应用以下基础样式：
- 背景色： #FAF8F5
- 边框： 四周 1px 实线，颜色 #D8D8D0
- 圆角： 6px
- 内边距： 四周 2.25rem
- 溢出： 隐藏（Hidden）
- 布局样式： Flex
- 布局方向： 行（Row）
在卡片内部嵌套两个组合模块：第一个承载文本信息，第二个承载按钮与超大编号。将第一个内层组合的布局方向设为列（Column）间距（Gap）设为 0.75rem。
在文本组合中依次添加一个文本模块（用于眉标 Eyebrow）、一个标题模块和一个文本模块（用于正文）。将标题设为 H2，字号 30px；正文模块字号 16px，最大宽度限制为 590px，以保证行长舒适。
按钮与编号的布局逻辑
第二个内层组合用于放置按钮和数字。将其布局方向设为列（Column）并应用以下关键设置：
- 尺寸： 生长以填充（Grow to Fill）
- 内容垂直对齐： 空间之间（Space Between）
- 项目对齐： 末端（End）
由于外层卡片是行方向布局，生长以填充使该组合占据剩余的水平空间。空间之间确保在高度有富余时，按钮与编号垂直分居两端，而末端对齐则让它们靠右排列，形成视觉重心。
在该组合内添加一个按钮模块文本设置为箭头符号，背景色同为 #FAF8F5。解除圆角值的联动，将左上角设为 0，其余三个角设为 50%，营造出独特的叶片状按钮造型。边框宽度设为 1px，颜色 #1D3B2E，样式为实线。
在文本选项中调整箭头大小与颜色，并关闭显示按钮图标避免 Divi 默认添加额外图标。在尺寸选项中，将按钮宽高均设为 2.5rem。链接指向 #work。一定要在属性组中添加 Aria Label（如“查看我们的作品”），因为单纯的箭头图标对屏幕阅读器用户而言缺乏语义。
添加超视号数字
在按钮下方添加一个文本模块用于显示编号。将字号放大至 76px透明度设为 0.15。由于卡片设置了溢出隐藏，超大的数字若有超出部分会被裁剪，这种“出血”效果能增加设计的层次感。Card 1 使用眉标“01 / FEATURED PROJECT”，标题“The Long Table Garden”，和对应的短描述，编号重复“01”。
复制生成其余卡片
完成后，复制该卡片三次，依次修改标签为 Card 2 至 Card 4，并更新内部的文本、眉标与编号内容，保持样式一致。
切换网格并应用偏移规则
将所有卡片准备就绪后，将行的布局样式从 Flex 切换为 Grid。设置网格为 8 列，并调整行间距（Row Gap）以匹配卡片的高度。此时，四张卡片默认会均匀分布或堆叠，尚未形成设计的留白节奏。
接下来，为每张卡片添加网格偏移规则。以 Card 2 为例，在网格设置中指定其起始列线为 3，列跨度为 6。这意味着它左侧的第 1、2 列将保持空白。通过调整不同卡片的起始线，可以创造出错落有致的阶梯效果。
构建完整的四卡片偏移序列
按照设计意图，依次配置四张卡片的偏移参数。Card 1 靠右，Card 2 稍左，Card 3 更左，Card 4 最左（或反之，根据具体设计图）。关键在于通过列线定位，精确控制空白区域的形状，而非依赖边距的累加。这种基于坐标的系统化控制，是传统 Flex 布局难以企及的。
移动端响应式适配
网格偏移在桌面端效果显著，但在窄屏设备上，过多的横向偏移可能导致内容被挤出可视区域。需在响应式设计选项中，针对平板和手机视图，重置卡片的偏移规则。通常建议在小屏下恢复单列堆叠布局，取消列跨度限制，让卡片自动占满整行，以保证信息的完整阅读体验。
尝试不同的留白形态
掌握基础阶梯留白后，可以尝试更具实验性的构图。比如说，让卡片在垂直方向上也发生偏移，形成对角线趋势；或混合使用不同跨度，创造不规则的碎片化布局。网格偏移规则的灵活性在于，它允许设计师像摆放家具一样摆放内容块，将“空白”本身作为设计元素，而不仅仅是填充物。
