理解网格偏移规则的运作逻辑
在 Divi 5 中，网格偏移规则（Grid Offset Rules）决定了子元素在网格中的起始位置和跨行跨列的数量。一条作用于容器的规则可以扩大第五个卡片的宽度，让精选内容横跨两行，或将其定位在特定列。对于重复性规则，当内容通过循环生成或手动添加时，匹配的项目会自动应用这些样式。
虽然设置项展示了单条规则的功能，但直观理解多条规则同时作用下的网格变化仍然具有挑战性。CSS 网格编辑器让这种关系变得可见：通过拖拽调整元素尺寸来创建规则，识别现有规则影响的具体对象，并实时观察布局随数值调整而产生的响应。
规则的基本构成
每条规则由目标对象和放置值两部分组成。目标偏移（Target Offset）下拉菜单决定规则作用的对象，选项包括第一项、临了一项、偶数项、奇数项，和从“每隔三项”到“每隔十项”的重复目标。若需自定义位置或模式，可选择不带预设的 nth-child 规则。
比如说，“第一项”仅影响第一个元素；“每隔第四项”作用于第 4、8、12 等位置；“偶数项”则覆盖第 2、4、6 及后续所有偶数位置。接着需输入控制放置的参数：
- 列起始和行起始指定元素开始所在的网格线。
- 列跨度和行跨度指定元素覆盖的列数或行数。
- 列结束和行结束指定元素终止所在的网格线。
起始或结束值指向网格线，而跨度计数的是线条之间的轨道。比如从第 2 条列线开始，列跨度为 2，元素将覆盖第 2 和第 3 列。下文示例主要使用起始和跨度参数。
规则绑定于容器
网格偏移规则属于定义网格的 Section、Row、Column 或 Group。它们针对容器内的子元素做定位，使布局模式与具体内容解耦。示例中，将网格项数量从 8 增加到 11，现有的 4n+2 和 4n+3 规则自动应用于新增的匹配位置，无需额外添加规则。网格项控制器用于通过占位符预览模式，增加数量并不等同于添加内容模块或改变循环结果。
按源码顺序计数
偏移目标按源码顺序计数，而非基于视觉上的网格位置。对于手动添加的元素，Layer 编辑器中的顺序即为计数依据。
在网格编辑器中操作偏移规则
打开网格编辑器
进入容器的 Design → Layout 设置，滚动至 Grid Offset Rules 区域。点击右上角的编辑图标进入可视化界面，画布上会显示网格线及当前应用的规则标签。
通过拖拽创建规则
直接在画布上拖动元素边缘或角落，系统会自动计算对应的起始和跨度值。松开鼠标后，规则列表中出现新条目，画布上的元素显示高亮边框标识受控区域。
从规则列表创建
也可在左侧规则列表中点击添加按钮，手动输入目标偏移和放置数值。这种方式适合需要精确控制数值的场景，避免拖拽带来的误差。
读取画布上的规则
画布上每条规则显示为彩色标签，标注在受影响元素上。悬停标签可高亮所有匹配项，清晰展示重复规则的作用范围。多条规则叠加时，标签颜色区分不同规则，便于排查冲突。
编辑规则
点击标签或直接操作画布元素即可修改规则。调整跨度时，元素实时重新布局；修改目标偏移时，受影响对象立即更新。所有操作在画布上即时反馈，无需切换至代码视图。
适配平板与手机
网格编辑器支持响应式断点。切换至平板或手机视图后，可单独调整各断点下的规则数值。比如说，桌面端跨度为 2 的元素在移动端可改为跨度 1，保持布局紧凑。各断点规则独立存储，互不影响。
立即体验 Divi 5 CSS 网格编辑器
上述流程覆盖了从理解规则结构到可视化编辑的完整过程。通过网格编辑器，布局决策从抽象数值变为直观操作，降低复杂网格设计的调试成本。
