freeCodeCamp/curriculum/challenges/chinese/01-responsive-web-design/css-grid/place-items-in-grid-areas-u...

908 B
Raw Blame History

id title challengeType videoUrl forumTopicId
5a94fe1369fb03452672e45d 使用 grid-area 属性将项目放置在网格区域中 0 https://scrimba.com/p/pByETK/cRrqmtV 301132

--description--

像上一个挑战那样,在为网格添加区域模板后,你可以通过引用你所定义的区域的名称,将元素放入相应的区域。为此,你需要对网格项使用grid-area

.item1 {
  grid-area: header;
}

这样,类名为item1的网格项就被放到了header区域里。在这个示例中,网格项将占用整个顶行,因为这一整行都被命名为 header 区域。

--instructions--

请使用grid-area属性,把类为item5元素放到footer区域。

--hints--

item5类应该有grid-area属性且值为footer

assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi));

--solutions--