--- title: '测试你的技能: 网格布局' slug: Learn/CSS/CSS_layout/Grid_skills translation_of: Learn/CSS/CSS_layout/Grid_skills ---
{{LearnSidebar}}

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

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

如果您遇到困难，请向我们寻求帮助 — 参阅本页底部的 {{anch("评估或进一步帮助")}} 部分。

网格布局（一）

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

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

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

{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid1.html", '100%', 700)}}

评估或进一步的工作目的, 可以下载此任务的源文件在你自己的编辑器或在线编辑器工作。

网格布局 二

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.

A box with two items inside one overlaying the other.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid2.html", '100%', 800)}}

Additional questions:

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Grid Layout Three

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.

Four items displayed in a grid.

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

{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid3.html", '100%', 800)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Grid and Flex Layout 4

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.

Two rows of cards, each with an image and a set of tags.

Try updating the code below to create your example: 

{{EmbedGHLiveSample("css-examples/learn/tasks/grid/grid4.html", '100%', 1200)}}

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help

You can practice these examples in the Interactive Editors mentioned above.

If you'd like your work assessed, or are stuck and want to ask for help:

  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: