Grid Container

网格容器是什么？

Flexbox 容器是构建网页的一种快速、高效的方式。网格容器（Grid Container）是一种特殊类型的容器。本质上，它是一个包含多个单元格的容器，这些单元格按行和列布局。

网格容器的工作原理

当您创建一个网格容器时，您可以确定它将包含多少行和列，而无需逐一拖动容器。

为什么使用网格容器？

对称设计：网格容器使创建对称设计变得简单，无需使用多个容器或处理多个设计设置。网格是帮助您保持元素对齐的绝佳工具。

网格容器通过提供精确控制行和列的功能，特别适用于需要严格的矩阵布局的设计。使用网格容器可以有效地整理和对齐内容，使网页设计既美观又具有高度的结构性。

创建网格容器

网格容器是快速构建整齐划分成列和行的容器的方法。

信息 注意 在此示例中，某些元素的对齐方式已更改，因此您的结果可能与示例不完全相同。

创建网格容器的步骤：

1. 打开页面：
   • 在 Elementor 编辑器中打开一个页面。
2. 添加容器：
   • 点击画布上的“+”号
3. 选择网格布局：
   • 选择网格（Grid）
   • 选择一个网格布局选项。本演示中，我们将选择4×4网格
   • 注意：网格容器中的一个单元格只能包含一个元素，但有一个技巧可以绕过这个限制（下面将讨论）。
4. 调整行高：
   • 在布局标签中选择自定义行大小。
   • 设置两行为 1fr
5. 添加文本和图片小部件：
   • 将一个文本编辑器小部件拖到第一个单元格并输入文本：“A rose by any other name”。
   • 将一个图片小部件拖到第二个单元格
   • 注意：添加小部件到网格时，需要将其拖到前一个单元格的边缘——例如，如果您想将一个小部件添加到第二个单元格，将其拖到第一个单元格的右边缘。
   • 在图片小部件中添加一张玫瑰的图片。
6. 在第四个单元格添加多个元素：
   • 由于单元格只能容纳一个元素，我们将在第四个单元格添加一个容器元素，然后将小部件添加到容器中。
   • 将一个容器元素拖到第四个单元格。
   • 为了保持我们的设计整齐，我们将使这个子容器成为一个网格容器。因为容器默认为Flexbox，我们需要在布局标签中将其更改为网格
   • 默认情况下，将 Flexbox 容器切换到网格将默认为 3×2 布局。我们的设计要求 2×2 布局。
   • 这可以通过更改布局标签中的设置来完成
7. 设计微调：
   • 此时，您应该拥有一个四个单元格的网格容器，第四个单元格中包含另一个四个单元格的网格容器。
   • 将一个文本编辑器小部件拖到这个新容器的第一个单元格并输入文本“Small Bouquet $10”。
   • 将一个文本编辑器小部件拖到新容器的第二个单元格并输入文本“Large Bouquet $20”。
   • 将图片小部件拖到第三和第四个单元格，分别放置小花束和大花束的图片。
   • 通过更改子容器网格行的高度为 1 fr 来紧凑设计

完成后，您的整个网格应该如下所示：

通过遵循这些步骤，您可以创建一个整洁划分成多列和行的网格容器，为您的网站设计带来更多的可能性和灵活性。

youtube视频教程：