图片马赛克对响应式设计的特殊要求
图片马赛克的核心逻辑在于混合尺寸。大尺寸的磁贴用来突出重点内容，小尺寸的磁贴则填充周围空间，共同构成一个紧密相连的网格结构。Divi 5 新增的 CSS 网格编辑器允许用户直接在可视化画布上拖拽、缩放磁贴，无需手写代码即可调整布局。
本教程将展示如何在一个四列布局中放置十二张图片，其中四张为放大的重点展示图。在完成桌面端搭建后，还需同步配置图片样式，并针对平板和手机端做断点适配。
网格布局在不同屏幕下的变形逻辑
马赛克布局依赖于跨度（spans）。一个磁贴可以横跨两列、两行甚至两者兼具，这样形成大小不一的视觉效果。但当屏幕宽度变窄时，原本跨越两列的磁贴可能会超出单列网格的范围，导致布局错乱或产生不必要的网格轨道与水平滚动条。
解决思路很直接：在每个断点处检查定位规则。保留那些仍能正常显示的跨度设置，调整那些不再适配当前宽度的规则。网格编辑器直观地展示了轨道、间距与项目位置，拖拽磁贴边角即可触发变化，系统会自动记录这些操作为容器（此处为 Row）上的 Grid Offset 规则。
各断点下的目标布局预览
在开始操作前，先明确三个断点下的最终形态。桌面端采用四列布局，四个大型重点磁贴在左右两侧交替分布。平板端压缩为两列，重点磁贴占满整行宽度，小图两两配对填充其间。手机端则简化为单列垂直序列，每张图片独占一行，确保浏览流畅。
步骤一：创建行结构并启动网格编辑器
在 Section 中添加一个新的Row并将其设置为12 列。这十二个子 Column 将分别承载一张图片。需要注意的是，这里的“12 列”是 Divi 的内容列概念，而我们要在桌面上将其映射到 4 个网格轨道上。
进入 Row 设置，切换到Content标签页，点击Open Grid Editor。如果该按钮不可用，需先前往Design > Layout将 Layout Style 设置为Grid。编辑器以浮动面板形式打开，可自由移动位置以便观察画布。
在编辑器中，将Columns设为4Rows保持auto以允许网格自动增行。将Horz. Gap与Vert. Gap统一设为40px。在Grid Items字段输入12这仅用于预览十二个占位符，不会实际增加 Row 的子内容列。
步骤二：在画布上塑造重点磁贴
选中第1个项目，拖动其右下角控制柄，将其扩展至占据2 列 x 2 行的区域，定位在网格左上角。此时，周围项目会自动重排，界面上会出现标记为Rule 1的标签，表明新的偏移规则已生效。
接着处理第4个项目，同样扩展为 2×2 跨度，放置在右侧临了两列的第 2-3 行。这种交错安排能让重点图在视觉上左右平衡。继续对第7和第10个项目执行相同操作：第 7 项放在左下方，第 10 项放在右下方，相比第 4 项向下错开一行。通过这种错落布局，空白区域被小图自然填补。
步骤三：填充图片并统一样式
画布上的数字占位符对应着 Row 中的 12 个内容列。逐一为这些列上传或选择图片。为了保持视觉整洁，建议利用 Divi 的 Preset 功能，一次性定义好所有图片的裁切模式、高度及边框样式，避免逐张手动调整。这一步能显著减少重复劳动，确保马赛克在加载时呈现一致的质感。
步骤四：平板端断点适配
切换至平板视图，网格默认继承桌面端的 4 列设置。此时需将Columns修改为2。重新检查那四个重点磁贴：它们在 2 列布局中跨度仍为 2 列，意味着它们将独占整行。需调整其他磁贴的行跨度，确保小图能紧密填充在重点图下方。若发现某磁贴位置异常，可通过重新拖拽或修改偏移规则来修正。平板端的间距可适当缩小，以提升阅读密度。
步骤五：手机端单列优化
在手机视图下，将Columns设为1。此时所有磁贴的列跨度限制无效，全部变为全宽显示。关键在于调整行跨度：原本 2 行高的重点图在手机端可能显得过高，需根据图片比例重置其行跨度，或允许其保持原比例但接受纵向滚动。确保小图与大图之间保持合理的垂直间距，避免视觉拥挤。手机端不显示横向滚动条是合格的标准。
复用马赛克模板的技巧
完成上述配置后，该 Row 的网格结构与偏移规则已稳定。更换图片只需替换内容列中的媒体文件，布局不会重置。若要创建新变体，可基于此 Row 创建预设，后续新建马赛克时直接应用该结构，仅需微调跨度规则即可。这种“结构复用 + 内容替换”的工作流，是提升 Divi 建站效率的有效手段。
