1.首先我们要创建一个带有两列的列结构。在这种情况下，我们必须输入6+6并生成一个两列的布局。
2.现在把addon添加到列中。在这种情况下，我们将SP页构建器图像addon添加到列中。（您将在addon中看到一个占位符图像，每次您将它添加到行/列中。）
3.现在我们要在第二列中添加另一行。点击列设置图标。现在从下拉菜单中选择“添加内行”选项。
在新添加的行中生成6+6列结构以获得完整的结构。
4.现在把addon添加到新添加的列中。然后我们需要使用addon来添加图像。点击etaddon图标，就可以访问SPPageBuilder3的编辑面板。
在General选项卡中，切换到选项“选择图像”。点击“上传图片”按钮。使用SPPageBuilder3的媒体管理器来上传和插入你的图片。对于所有添加的图像附加程序，您必须遵循相同的步骤。
5.这就是它在添加所有图像之后的最终效果。
6.现在我们必须让它对平板电脑和移动设备做出反应。对于平板电脑，我们已经调整了每张图片的平板布局。要做到这一点，请单击addon设置图标。从下拉菜单中选择栏目选项。
现在点击“响应”选项卡，进入平板电脑布局网格。对于第一张图片，我们选择了col-6。对于第二张图片，我们选择了col-12，第三和第四张图片我们选择了col-6。
在所有这些调整之后，这就是平板电脑布局的样子。
对于移动版本，我们已经为所有的图像选择了col-xs-12的移动布局。此外，在编辑列设置的Advanced选项卡中，我们已经调整了自定义列宽度。
这就是移动版的样子。
7.所以，这就是如何用SPPageBuilder3创建令人惊叹的全响应图像网格。请注意，您可能需要非常仔细地选择图像，并相应地调整它们的大小，以使它们适合网格布局。
标签：Joomla,SP,网格
