技能测试：网格布局

此任务的目的是让你使用 CSS 网格布局，并测试你是否了解网格和网格项的行为方式。你将会完成三个包括不同的元素小任务。

备注： 你可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具 (如 CodePen、jsFiddle 或 Glitch) 处理这些任务可能会更有帮助。

如果你遇到了困难，可以通过沟通渠道联系我们。

网格布局 一

在此任务中，你需要创建一个网格，要求其中的四个子元素能自动排布。网格内要有三列并且将可用空间等分，列和行的间距均为 20px。

在三列网格布局中有四个物体放入其中。

尝试更新下面的实时代码以复现上面的示例：

html
<div class="grid">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>
css
.grid {
}
Click here to show the solution

Create a grid using display: grid with three columns using grid-template-columns and a gap between the items:

css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

网格布局 二

在此例中，我们已经定义好了一个 grid, 请通过修改下面两个子元素的 CSS 规则，导致它们跨过彼此的网格轨道; 第二个 item 应该在第一个 item 之上 (如下图所示).

盒子中的两个元素，其中一个元素覆盖在另一个元素上。

尝试更新下面的实时代码以复现上面的示例：

html
<div class="grid">
  <div class="item1">One</div>
  <div class="item2">Two</div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  gap: 10px;
}

.item1 {
}

.item2 {
}
Click here to show the solution

It is possible to layer items by way of them occupying the same grid cells. One option is to use the shorthands below, however it would be correct to use the longhand grid-row-start for example.

css
.item1 {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.item2 {
  grid-column: 2 / 5;
  grid-row: 2 / 4;
}

For the bonus question, one way of achieving this would be to use order, which we've encountered in the flexbox tutorial.

css
.item1 {
  order: 1;
}

Another valid solution is to use z-index:

css
.item1 {
  z-index: 1;
}

网格布局 三

此 grid 中 4 个子元素，初始状态是显示的是 auto-placement. 请通过使用 grid-area 和 grid-template-areas 属性对照下图放置元素的布局。

网格中显示的四个项目。

尝试更新下面的实时代码以复现上面的示例：

html
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
</div>
css
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
Click here to show the solution

Each part of the layout needs a name using the grid-area property and grid-template-areas to lay them out. Possible areas of confusion would be not realizing you should place a . to leave a cell empty, or that you should repeat the name to cause an element to span more than one track:

css
.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 2fr;
  grid-template-areas:
    "aa aa"
    "bb cc"
    ". dd";
}

.one {
  grid-area: aa;
}

.two {
  grid-area: bb;
}

.three {
  grid-area: cc;
}

.four {
  grid-area: dd;
}

网格布局 四

此例中，你需要同时使用 Grid Layout 和 Flexbox 来完成下图所示的任务。这个过程中你不需要通过改变 HTML 来完成。

两行卡片，每个卡片有一个图像和一组标签。

尝试更新下面的实时代码以复现上面的示例：

html
<div class="container">
  <div class="card">
    <img
      alt="a single red balloon"
      src="https://mdn.github.io/shared-assets/images/examples/balloons1.jpg" />
    <ul class="tags">
      <li>balloon</li>
      <li>red</li>
      <li>sky</li>
      <li>blue</li>
      <li>Hot air balloon</li>
    </ul>
  </div>
  <div class="card">
    <img
      alt="balloons over some houses"
      src="https://mdn.github.io/shared-assets/images/examples/balloons2.jpg" />
    <ul class="tags">
      <li>balloons</li>
      <li>houses</li>
      <li>train</li>
      <li>harborside</li>
    </ul>
  </div>
  <div class="card">
    <img
      alt="close-up of balloons inflating"
      src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
    <ul class="tags">
      <li>balloons</li>
      <li>inflating</li>
      <li>green</li>
      <li>blue</li>
    </ul>
  </div>
  <div class="card">
    <img
      alt="a balloon in the sun"
      src="https://mdn.github.io/shared-assets/images/examples/balloons4.jpg" />
    <ul class="tags">
      <li>balloon</li>
      <li>sun</li>
      <li>sky</li>
      <li>summer</li>
      <li>bright</li>
    </ul>
  </div>
</div>
css
.container {
}

.tags {
}
Click here to show the solution

The container will need to be a grid layout, as we have alignment in rows and columns - two-dimensional. The <ul> needs to be a flex container as tags (<li> elements) are not lined up in columns, only in rows and they are centered in the space with the alignment property justify-content set to center.

You may try to use flexbox on the container and restrict the cards with percentage values. You may also try to make the items into a grid layout in which case, note that the items are not aligned in two dimensions so flexbox isn't the best choice.

css
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}