任务 1
在此任务中，我们希望您创建一个网格，并将四个子元素自动放置其中。该网格应具有三个平均分配可用空间的列，并在列和行轨道之间留有 20 像素的间隙。之后，尝试在类名为 grid 的父容器内添加更多子容器，并观察它们的默认行为。
您的最终结果应如下面的图片所示
<div class="grid">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.grid {
/* Add styles here */
}
点击此处显示解决方案
使用 display: grid 创建一个网格，使用 grid-template-columns 定义三列，并设置项之间的 gap。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
任务 2
在此任务中，我们已经定义了一个网格。我们希望您编辑两个子元素的 CSS 规则，使它们分别跨越多个网格轨道。第二个项应覆盖第一个项，如下图所示。
附加题：您现在能否在不更改源中项的顺序的情况下，让第一个项显示在最上面？
<div class="grid">
<div class="item1">One</div>
<div class="item2">Two</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.item1 {
background-color: rgb(74 102 112 / 70%);
border: 5px solid rgb(74 102 112 / 100%);
}
.item2 {
background-color: rgb(214 162 173 / 70%);
border: 5px solid rgb(214 162 173 / 100%);
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
/* Add styles here */
}
.item2 {
/* Add styles here */
}
点击此处显示解决方案
可以通过让项占据相同的网格单元格来实现项的堆叠。一种方法是使用下面的简写属性，但使用长式属性（例如 grid-row-start）也是正确的。
.item1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.item2 {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
对于附加题，实现此目标的一种方法是使用 order，我们在 Flexbox 教程中已经遇到过它。
.item1 {
order: 1;
}
另一种有效的解决方案是使用 z-index。
.item1 {
z-index: 1;
}
任务 3
在此任务中，该网格有四个直接子元素。初始状态下，它们使用自动放置进行显示。
要完成任务，请使用 grid-area 和 grid-template-areas 属性，按照下图所示布局这些项。
<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.grid > * {
background-color: #4d7298;
border: 2px solid #77a6b6;
border-radius: 0.5em;
color: white;
padding: 0.5em;
}
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
点击此处显示解决方案
布局的每个部分都需要一个名称，使用 grid-area 属性，并使用 grid-template-areas 来布局它们。可能令人困惑的地方是未能意识到您应该放置一个 . 来留空单元格，或者您应该重复名称以使元素跨越一个以上的轨道。
.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;
}
任务 4
在此任务中，您需要结合使用网格布局和 Flexbox 来重新创建下图所示的示例。列和行轨道之间的间隙应为 10 像素。您无需对 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>
body {
font: 1.2em / 1.5 sans-serif;
}
.card {
display: grid;
grid-template-rows: 200px min-content;
}
.card > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tags {
margin: 0;
padding: 0;
list-style: none;
}
.tags > * {
background-color: #999999;
color: white;
padding: 0.2em 0.8em;
border-radius: 0.2em;
font-size: 80%;
margin: 5px;
}
.container {
/* Add styles here */
}
.tags {
/* Add styles here */
}
点击此处显示解决方案
容器需要是一个网格布局，因为我们在行和列（二维）上都有对齐。<ul> 需要是一个 flex 容器，因为标签（<li> 元素）不是按列对齐，只按行对齐，并且它们在空间中居中，对齐属性 justify-content 设置为 center。
您可以尝试在容器上使用 Flexbox 并用百分比值限制卡片。您也可以尝试将项设置为网格布局，在这种情况下，请注意项不是二维对齐的，因此 Flexbox 不是最佳选择。
.container {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
}