题目链接
任务一
略
任务二
题目要求：
在此例中，我们已经定义好了一个 grid, 请通过修改下面两个子元素的 CSS 规则，导致它们跨过彼此的网格轨道; 第二个 item 应该在第一个 item 之上 (如下图所示).
HTML 代码：
1
2
3
4
| <div class="grid">
<div class="item1">One</div>
<div class="item2">Two</div>
</div>
|
CSS 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
gap: 10px;
}
.item1 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
.item2 {
grid-column: 2 / 5;
grid-row: 2 / 4;
}
|
如果要求第一个 item 在第二个 item 之上，则在 .item1 中加入代码 z-index: 1; 即可。
任务三
略
任务四
题目要求：
此例中，你需要同时使用 Grid Layout 和 Flexbox 来完成下图所示的任务。这个过程中你不需要通过改变 HTML 来完成。
HTML 代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <div class="container">
<div class="card">
<img src="balloons1.jpg" alt="a single red balloon">
<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 src="balloons2.jpg" alt="balloons over some houses">
<ul class="tags">
<li>balloons</li>
<li>houses</li>
<li>train</li>
<li>harborside</li>
</ul>
</div>
<div class="card">
<img src="balloons3.jpg" alt="close-up of balloons inflating">
<ul class="tags">
<li>balloons</li>
<li>inflating</li>
<li>green</li>
<li>blue</li>
</ul>
</div>
<div class="card">
<img src="balloons4.jpg" alt="a balloon in the sun">
<ul class="tags">
<li>balloon</li>
<li>sun</li>
<li>sky</li>
<li>summer</li>
<li>bright</li>
</ul>
</div>
</div>
|
CSS 代码：
1
2
3
4
5
6
7
8
9
10
11
| .container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
}
.tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
|