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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
---
title: '测试你的技能: 网格布局'
slug: Learn/CSS/CSS_layout/Grid_skills
translation_of: Learn/CSS/CSS_layout/Grid_skills
---
<div>{{LearnSidebar}}</div>
<p>此任务的目的是让你使用CSS网格布局，并测试你是否了解网格和网格项的行为方式。 你将会完成三个包括不同的元素小任务。</p>
<div class="blockIndicator note">
<p><strong>提示</strong>: 您可以在下面的交互式编辑器中试用解决方案，不过，下载代码并使用在线工具(如CodePen、jsFiddle或Glitch)处理这些任务可能会更有帮助。<br>
<br>
如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 {{anch("评估或进一步帮助")}} 部分。</p>
</div>
<h2 id="网格布局（一）">网格布局（一）</h2>
<p>在此任务中，你需要创建一个网格，要求其中的四个子元素能自动排布。网格内要有三列并且将可用空间等分，列和行的间距均为20px。</p>
<p>在三列网格布局中有四个物体放入其中。</p>
<p>尝试更新下面的实时代码以复现上面的示例:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}</p>
<div class="blockIndicator note">
<p>评估或进一步的工作目的, 可以<a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid1-download.html">下载此任务的源文件</a>在你自己的编辑器或在线编辑器工作。</p>
</div>
<h2 id="网格布局_二">网格布局 二</h2>
<p>In this example 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.</p>
<p><img alt="A box with two items inside one overlaying the other." src="https://mdn.mozillademos.org/files/17067/grid-task2.png" style="height: 589px; width: 1264px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 800)}}</p>
<p>Additional questions:</p>
<ul>
<li>Can you now cause the first item to display on top without changing the order of items in the source?</li>
</ul>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid2-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="Grid_Layout_Three">Grid Layout Three</h2>
<p>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.</p>
<p><img alt="Four items displayed in a grid." src="https://mdn.mozillademos.org/files/17068/grid-task3.png" style="height: 375px; width: 1269px;"></p>
<p>Try updating the live code below to recreate the finished example:</p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="Grid_and_Flex_Layout_4">Grid and Flex Layout 4</h2>
<p>You will need to use both Grid Layout and Flexbox to recreate the example as seen in the image. You do not need to make any changes to the HTML in order to do this.</p>
<p><img alt="Two rows of cards, each with an image and a set of tags." src="https://mdn.mozillademos.org/files/17079/grid-task4.png" style="height: 1158px; width: 1428px;"></p>
<p>Try updating the code below to create your example: </p>
<p>{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}</p>
<div class="blockIndicator note">
<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/grid/grid4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
</div>
<h2 id="Assessment_or_further_help">Assessment or further help</h2>
<p>You can practice these examples in the Interactive Editors mentioned above.</p>
<p>If you'd like your work assessed, or are stuck and want to ask for help:</p>
<ol>
<li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
<li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
<ul>
<li>A descriptive title such as "Assessment wanted for Grid layout 1 skill test".</li>
<li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
<li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
<li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
</ul>
</li>
</ol>
|
