测试你的技能：网格

¥Task 1

在此任务中，你应该创建一个网格，四个子元素将自动放置到其中。网格应具有三列，均等地共享可用空间，并且列轨道和行轨道之间应有 20 像素的间隙。之后，尝试在父容器中添加更多具有 grid 类的子容器，并查看它们的默认行为。

¥In this task, you should create a grid into which the four child elements will auto-place. The grid should have three columns sharing the available space equally and a 20-pixel gap between the column and row tracks. After that, try adding more child containers inside the parent container with the class of grid and see how they behave by default.

你的最终结果应如下图所示：

¥Your final result should look like the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

¥Task 2

在此任务中，我们已经定义了一个网格。通过编辑两个子元素的 CSS 规则，使它们分别跨越多个网格轨道。第二个项目应覆盖第一个项目，如下图所示：

¥In this task, we already have a grid defined. By editing the CSS rules for the two child elements, cause them to span over several grid tracks each. The second item should overlay the first as in the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

附加问题：

¥Additional question:

• 你现在可以使第一个项目显示在顶部而不更改源中项目的顺序吗？

¥Task 3

在此任务中，该网格中有四个直接子级。起点使用自动放置来显示它们。使用 grid-area 和 grid-template-areas 属性来布置项目，如下图所示：

¥In this task, there are four direct children in this grid. The starting point has them displayed using auto-placement. Use the grid-area and grid-template-areas properties to lay the items out as shown in the image below:

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example:

¥Task 4

在此任务中，你将需要使用网格布局和 Flexbox 来重新创建示例，如下图所示。列轨道和行轨道之间的间隙应为 10px。你无需对 HTML 进行任何更改即可实现此目的。

¥In this task, you will need to use both grid layout and flexbox to recreate the example as seen in the image below. The gap between the column and row tracks should be 10px. You do not need to make any changes to the HTML in order to achieve this.

尝试更新下面的实时代码以重新创建完成的示例：

¥Try updating the live code below to recreate the finished example: