Bricks Builder 网格布局

这次我们来看看 bricks builder 的 grid 网格，不管你用的模块，区块，容器还是 div 都可以在 display 显示选择 grid

当我们选中 display：grid 时，出现的主要设置就是：

1. Grid template columns
2. Grid template rows
3. Grid auto columns
4. Grid auto rows
5. Grid auto flow

我们主要用到的就是 grid templete，其他的使用度不高。

给网格设置指定的列数。

给网格设置指定的行数。

上面这两个都可以直接用 fr 来定义，1fr 等于一列或一行，以此类推。（可以写准确的单位，不过它并不会自己适应上你整个网格布局的宽度)

你也可以直接写 repeat(3, 1fr)，这和 1fr 1fr 1fr 是一样的，这里具体看视频吧，文字不好理解。

除了使用 fr 之外，我们还可以给网格设置一个最小和最大宽度，像这样：repeat(n,minmax(200px,300px))，通过 min 和 max，我这里分别设置了最小宽度 200px 和最大宽度 300px。

前面重复次数（n）除了直接写数字以外，我们还可以使用以下两种方式：

• auto-fit: 根据你网格布局的宽度填满，当然是在你给它的设置基础之上。
• auto-fill: 相反，以你设置的宽度为基础，根据不同设备宽度可以允许放下的空间显示。

在 grid auto 我们设置的是在 grid template 以外的网格，而且他们会重复循环。

这个设置是我们网格的排列顺序，里面的 dense 设置我们之后会说到。

这两个设置是对齐我们网格里面的内容，蓝色蚂蚁线框是网格。

这个对齐的是我们整个网格，视频里面的浏览有问题。

最下面的排列设置我们要是在整个网格里用是没用的，我们得单独点每个网格，里面会出现一些其他网格设置。

HTML 标签，显示和排列我在之前的视频说过了，过…

我们主要来看看上面的 Grid item 设置，这个可以容许我们给单独网格设置它的占据空间。

这里我是选择了一个在3列3行的网格来设置，所以需要写 3/n，后面的数字是我们像要这个网格扩展到什么位子。我想要它从第三列开始占到第四列，那么就4+1，写5，像这样：3/5。

不过这里我们其实不一定要根据当前位置来写前面的数字，我们完全可以写 1/5，不过这样它原先的位子就会出现一个空位。

这里就要用到我们刚刚跳过的 auto flow dense 设置，它会自动填满空缺的位子，不过它这种填空的方法就有点随意了，因为它并没有提供给我们 dense-column 和 dense-row 的选项。

Bricks Builder  网格的基础设置到这就结束了，不过这里我们简单的来看以下怎么在网格系统里设置 Query loop（查询循环）

首先我们需要一个 div，显示设置 grid 网格，在这个 div 里面在放一个 div 并开启 query loop，之后在这里面放想要的内容就可以了，里面的内容得是动态标签才行，然后就是我们刚刚上面的一系列操作了。

唯一特别的就是，用 query loop 我们不能给每个单独网格设置它占据的空间，最起码 Bricks 现在没有这个选项，所以我们只能跳过 css 代码来操作了。

首先我们给开启 query loop 的 div 起一个 css，这个设置也会同时给每个网格使用这个css，因为它是loop循环嘛。

然后我们去到大网格的 css 写下面的代码：

nth-child(n) 的 n 指的是我们想要设置哪个元素

grid-column 就和我们刚刚上面设置的一样，不记得了就上去看看。