chore: seed chinese traditional (#42005)

Seeds the chinese traditional files manually so we can deploy to
staging.
This commit is contained in:
Nicholas Carrigan (he/him)
2021-05-05 10:13:49 -07:00
committed by GitHub
parent e46e80e08f
commit 3da4be21bb
1669 changed files with 153114 additions and 678 deletions

View File

@ -0,0 +1,76 @@
---
id: 5a9036d038fddaf9a66b5d32
title: 使用 grid-template-columns 添加多列
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
forumTopicId: 301117
dashedName: add-columns-with-grid-template-columns
---
# --description--
簡單地添加一個網格元素並不會有任何明顯的效果。 你還需要明確網格的結構。 在一個網格容器中使用 `grid-template-columns` 屬性可以添加一些列,示例如下:
```css
.container {
display: grid;
grid-template-columns: 50px 50px;
}
```
上面的代碼會在網格容器中添加兩列,寬度均爲 50px。 `grid-template-columns` 屬性值的個數表示網格的列數,每個值表示相應的列寬度。
# --instructions--
請給網格容器設置三個列,每列寬度均爲 `100px`
# --hints--
class 爲 `container` 的元素應具有 `grid-template-columns` 屬性,該屬性應有三個屬性值,均爲 `100px`
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?100px\s*?100px\s*?100px\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-template-columns: 100px 100px 100px;}</style>
```

View File

@ -0,0 +1,69 @@
---
id: 5a9036ee38fddaf9a66b5d37
title: 使用 grid-gap 爲網格添加間距
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
forumTopicId: 301118
dashedName: add-gaps-faster-with-grid-gap
---
# --description--
`grid-gap` 屬性是前兩個挑戰中出現的 `grid-row-gap``grid-column-gap` 的簡寫屬性,它更方便使用。 如果 `grid-gap` 只有一個值,那麼這個值表示行與行之間、列與列之間的間距均爲這個值。 如果有兩個值,那麼第一個值表示行間距,第二個值表示列間距。
# --instructions--
請使用 `grid-gap` 屬性設置行間距爲 `10px`、列間距爲 `20px`
# --hints--
`container` class 應該有一個 `grid-gap` 屬性,在行之間設置 `10px` 的間距,在列之間設置 `20px` 的間距。
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-gap: 10px 20px;}</style>
```

View File

@ -0,0 +1,68 @@
---
id: 5a9036e138fddaf9a66b5d33
title: 使用 grid-template-rows 添加多行
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
forumTopicId: 301119
dashedName: add-rows-with-grid-template-rows
---
# --description--
在上個挑戰中,你創建的網格會自動設置行數。 要手動調整行,請使用 `grid-template-rows` 屬性,就像在上一個挑戰中使用 `grid-template-columns` 屬性一樣。
# --instructions--
請給網格添加兩行,使每行高度均爲 `50px`
# --hints--
類爲 `container` 的元素應具有 `grid-template-rows` 屬性,且該屬性的兩個屬性值均爲 `50px`
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 100px 100px 100px;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-template-rows: 50px 50px;}</style>
```

View File

@ -0,0 +1,71 @@
---
id: 5a90376038fddaf9a66b5d3c
title: 使用 justify-items 水平對齊所有項目
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
forumTopicId: 301120
dashedName: align-all-items-horizontally-using-justify-items
---
# --description--
有時你想讓 CSS 網格中的網格項共享對齊方式。 你可以像之前學習的那樣分別設置它們的對齊方式,也可以對網格容器使用 `justify-items` 使它們一次性沿水平軸對齊。 這個屬性能接受我們在之前兩個挑戰中學到的所有值作爲屬性值,但與之前不同的是,它會將網格中**所有**的網格項按所設置的方式對齊。
# --instructions--
請使用這個屬性設置所有網格項水平居中。
# --hints--
class 爲 `container` 的元素應具有 `justify-items` 屬性且屬性值應爲 `center`
```js
assert(
code.match(
/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.container {justify-items: center;}</style>
```

View File

@ -0,0 +1,69 @@
---
id: 5a94fdf869fb03452672e45b
title: 使用 align-items 垂直對齊所有項目
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
forumTopicId: 301121
dashedName: align-all-items-vertically-using-align-items
---
# --description--
對網格容器使用 `align-items` 屬性可以讓網格中所有的網格項沿豎直方向對齊。
# --instructions--
請使用這個屬性將所有網格項移動到單元格的末尾。
# --hints--
class 爲 `container` 的元素應具有 `align-items` 屬性且屬性值應爲 `end`
```js
assert(
code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.container {align-items: end;}</style>
```

View File

@ -0,0 +1,79 @@
---
id: 5a90374338fddaf9a66b5d3a
title: 使用 justify-self 水平對齊項目
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
forumTopicId: 301122
dashedName: align-an-item-horizontally-using-justify-self
---
# --description--
在 CSS 網格中,每個網格項的內容分別位於被稱爲<dfn>單元格cell</dfn>的框內。 你可以使用網格項的 `justify-self` 屬性,設置其內容的位置在單元格內沿水平軸的對齊方式。 默認情況下,這個屬性的值是 `stretch`,這將使內容佔滿整個單元格的寬度。 該 CSS 網格屬性也可以使用其他的值:
`start`:使內容在單元格左側對齊,
`center`:使內容在單元格居中對齊,
`end`:使內容在單元格右側對齊,
# --instructions--
請使用 `justify-self` 屬性讓 class 爲 `item2` 的網格項居中。
# --hints--
class 爲 `item2` 的元素應具有 `justify-self` 屬性且屬性值應爲 `center`
```js
assert(
code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background: LightSkyBlue;}
.item2 {
background: LightSalmon;
/* Only change code below this line */
/* Only change code above this line */
}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.item2 {justify-self: center;}</style>
```

View File

@ -0,0 +1,71 @@
---
id: 5a90375238fddaf9a66b5d3b
title: 使用 align-self 垂直對齊項目
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
forumTopicId: 301123
dashedName: align-an-item-vertically-using-align-self
---
# --description--
正如能設置網格項沿水平方向的對齊方式一樣,我們也可以設置網格項沿豎直方向的對齊方式。 爲此,我們可以對網格項使用 `align-self` 屬性來實現。 在上一個挑戰中適用於 `justify-self` 屬性的屬性值同樣也可用於這個屬性。
# --instructions--
請使用值 `end` 來讓 class 爲 `item3` 的網格項沿底端對齊。
# --hints--
class 爲 `item3` 的元素應具有 `align-self` 屬性且屬性值應爲 `end`
```js
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3 {
background: PaleTurquoise;
/* Only change code below this line */
/* Only change code above this line */
}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.item3 {align-self: end;}</style>
```

View File

@ -0,0 +1,76 @@
---
id: 5a9036ee38fddaf9a66b5d35
title: 使用 grid-column-gap 創建多列之間的間距
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
forumTopicId: 301124
dashedName: create-a-column-gap-using-grid-column-gap
---
# --description--
目前爲止,在你所創建的網格中,每列都相互緊挨着。 有時候你想要列之間有一個間距。 如果需要在列與列之間添加一些間距,我們可以使用 `grid-column-gap`
```css
grid-column-gap: 10px;
```
這會爲我們創建的所有列之間都添加 10px 的空白間距。
# --instructions--
請爲網格中的所有列添加寬度爲 `20px` 的間距。
# --hints--
class 爲 `container` 的元素應具有 `grid-column-gap` 屬性且屬性值應爲 `20px`
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-column-gap: 20px;}</style>
```

View File

@ -0,0 +1,68 @@
---
id: 5a9036ee38fddaf9a66b5d36
title: 使用 grid-row-gap 創建多行之間的間距
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
forumTopicId: 301125
dashedName: create-a-row-gap-using-grid-row-gap
---
# --description--
和上個挑戰在兩列之間添加間距一樣,我們還可以用 `grid-row-gap` 設置行間距。
# --instructions--
請爲網格中的行添加高度爲 `5px` 的間距。
# --hints--
class 爲 `container` 的元素應具有 `grid-row-gap` 屬性且屬性值應爲 `5px`
```js
assert(
code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-row-gap: 5px;}</style>
```

View File

@ -0,0 +1,140 @@
---
id: 5a94fe5469fb03452672e461
title: 使用 auto-fill 創建彈性佈局
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
forumTopicId: 301126
dashedName: create-flexible-layouts-using-auto-fill
---
# --description--
repeat 方法帶有一個名爲<dfn>自動填充auto-fill</dfn>的功能。 它的功能是根據容器的大小,儘可能多地放入指定大小的行或列。 你可以通過結合 `auto-fill``minmax` 來更靈活地佈局。
```css
repeat(auto-fill, minmax(60px, 1fr));
```
上面的代碼效果是這樣:首先,列的寬度會隨容器大小改變。其次,只要容器寬度不足以插入一個寬爲 60px 的列,當前行的所有列就都會一直拉伸。請自己調整寬度,動手試一下就不難理解了。 **注意:**如果容器寬度不足以將所有網格項放在同一行,餘下的網格項將會移至新的一行。
# --instructions--
在第一個網格中,請使用 `auto-fill``repeat` 來填充網格。 其中列寬的最小值爲 `60px`,最大值爲 `1fr`。 你可以調整最右側的預覽區大小,查看自動填充的效果。
# --hints--
class 爲 `container` 的元素應具有 `grid-template-columns` 屬性,且屬性值應使用 `repeat``auto-fill`,以便將最小寬度爲 `60px`、最大寬度爲 `1fr` 的列填充至網格。
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line */
grid-template-columns: repeat(3, minmax(60px, 1fr));
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
grid-template-columns: repeat(3, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line */
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
grid-template-columns: repeat(3, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```

View File

@ -0,0 +1,91 @@
---
id: 5a94fe6269fb03452672e462
title: 使用 auto-fit 創建彈性佈局
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
forumTopicId: 301127
dashedName: create-flexible-layouts-using-auto-fit
---
# --description--
`auto-fit` 效果幾乎和 `auto-fill` 一樣。 不同點僅在於,當容器的大小大於各網格項之和時,`auto-fill` 會持續地在一端放入空行或空列,這樣就會使所有網格項擠到另一邊;而 `auto-fit` 則不會在一端放入空行或空列,而是會將所有網格項拉伸至合適的大小。
**注意:**如果容器寬度不足以將所有網格項放在同一行,餘下的網格項將會移至新的一行。
# --instructions--
在第二個網格中,請用 `auto-fit``repeat` 來填充網格,其中列寬的最小值爲 `60px`,最大值爲`1fr`。 你可以調整最右側的預覽區來查看效果。
# --hints--
`container2` class 應該有一個 `grid-template-columns` 屬性,通過 `repeat``auto-fit` 將網格中的列的寬度設置爲最小 `60px`,最大 `1fr`
```js
assert(
code.match(
/.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
/* Only change code below this line */
grid-template-columns: repeat(3, minmax(60px, 1fr));
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
```

View File

@ -0,0 +1,106 @@
---
id: 5a94fe8569fb03452672e464
title: 在網格中創建網格
challengeType: 0
forumTopicId: 301128
dashedName: create-grids-within-grids
---
# --description--
將元素轉換爲網格只會影響其子元素(即直接後代元素,英文爲 direct descendants。意思是一個元素的所有後代元素中父級元素爲該元素的所有元素。 因此,如果我們把某個子元素設置爲網格,就會得到一個嵌套的網格。
例如,如果我們設置 class 爲 `item3` 的元素的 `display``grid-template-columns` 屬性,就會得到一個嵌套的網格。
# --instructions--
請設置 `display``grid-template-columns`,使類爲 `item3` 元素轉換爲有兩列且寬度爲 `auto``1fr` 的網格。
# --hints--
class 爲 `item3` 的元素應具有 `grid-template-columns` 屬性且屬性值應爲 `auto``1fr`
```js
assert(
code.match(
/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
)
);
```
class 爲 `item3` 的元素應具有 `display` 屬性且屬性值應爲 `grid`
```js
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
```
# --seed--
## --seed-contents--
```html
<style>
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
/* Only change code below this line */
/* Only change code above this line */
}
.item4 {
background: lightpink;
grid-area: footer;
}
.itemOne {
background: PaleGreen;
}
.itemTwo {
background: BlanchedAlmond;
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
<div class="itemOne">paragraph1</div>
<div class="itemTwo">paragraph2</div>
</div>
<div class="item4">footer</div>
</div>
```
# --solutions--
```html
<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
```

View File

@ -0,0 +1,64 @@
---
id: 5a858944d96184f06fd60d61
title: 創建你的第一個 CSS 網格
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
forumTopicId: 301129
dashedName: create-your-first-css-grid
---
# --description--
通過將屬性 `display` 的值設爲 `grid`HTML 元素就可以變爲網格容器。 通過前面的操作,你可以對該容器使用與 CSS 網格CSS Grid相關的屬性。
**注意:**在 CSS 網格中,父元素稱爲<dfn>容器container</dfn>,它的子元素稱爲<dfn>items</dfn>
# --instructions--
請將 class 爲 `container` 的 div 的 display 屬性值設置爲 `grid`
# --hints--
`container` class 應具有 `display` 屬性,屬性值應爲 `grid`
```js
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
/* Only change code below this line */
/* Only change code above this line */
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {display: grid;}</style>
```

View File

@ -0,0 +1,114 @@
---
id: 5a94fe0569fb03452672e45c
title: 將網格劃分爲區域模板
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
forumTopicId: 301130
dashedName: divide-the-grid-into-an-area-template
---
# --description--
你可以將網格中的一些單元格組合成一個<dfn>區域area</dfn>,併爲該區域指定一個自定義名稱。 可以通過給容器加上 `grid-template-areas` 來實現:
```css
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
```
上面的代碼將頂部三個單元格合併成一個名爲 `header` 的區域,將底部三個單元格合併爲一個名爲 `footer` 的區域,並在中間行創建了兩個區域:`advert``content`。 **注意:**在代碼中,每個單詞代表一個網格單元格,每對引號代表一行。 除了自定義標籤,你還能使用句點(`.`)來表示一個空單元格。
# --instructions--
請放置區域模板,讓名爲 `advert` 的區域變成空單元格。
# --hints--
class 爲 `container` 的元素應具有 `grid-template-areas` 屬性,在其屬性值中,應使用 `.` 代替 `advert`
```js
assert(
__helpers
.removeCssComments(code)
.match(
/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
/* Only change code below this line */
"header header header"
"advert content content"
"footer footer footer";
/* Only change code above this line */
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
". content content"
"footer footer footer";
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```

View File

@ -0,0 +1,77 @@
---
id: 5a94fe4469fb03452672e460
title: 使用 minmax 函數限制項目大小
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
forumTopicId: 301131
dashedName: limit-item-size-using-the-minmax-function
---
# --description--
此外,內置函數 `minmax` 也可用於設置 `grid-template-columns``grid-template-rows` 的值。 它的作用是在網格容器改變大小時限制網格項的大小。 爲此,你需要指定網格項允許的尺寸範圍。 例如:
```css
grid-template-columns: 100px minmax(50px, 200px);
```
在上面的代碼中,我們通過 `grid-template-columns` 添加了兩列,第一列寬度爲 100px第二列寬度最小值是 50px最大值是 200px。
# --instructions--
請用 `minmax` 函數替換 `repeat` 函數中的 `1fr`,限定其最小值爲 `90px`,最大值爲`1fr`。 你可以調整最右側的預覽面板查看效果。
# --hints--
class 爲 `container` 的元素應使用 `grid-template-columns` 屬性設置 3 列,其中,每列最小寬度應爲 `90px`,最大寬度應爲 `1fr`
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line */
grid-template-columns: repeat(3, 1fr);
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
```

View File

@ -0,0 +1,86 @@
---
id: 5a94fe1369fb03452672e45d
title: 使用 grid-area 屬性將項目放置在網格區域中
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
forumTopicId: 301132
dashedName: place-items-in-grid-areas-using-the-grid-area-property
---
# --description--
像上一個挑戰那樣,在爲網格添加區域模板後,可以通過引用你所定義的區域的名稱,將元素放入相應的區域。 爲此,你需要對網格項使用 `grid-area`
```css
.item1 {
grid-area: header;
}
```
這樣class 爲 `item1` 的網格項就被放到了 `header` 區域裏。 在這個示例中,網格項將佔用第一行整行,因爲這一整行都被命名爲標題區域。
# --instructions--
請使用 `grid-area` 屬性,把 class 爲 `item5` 的元素放到 `footer` 區域。
# --hints--
class 爲 `item5` 的元素應具有 `grid-area` 屬性且屬性值應爲 `footer`
```js
assert(
__helpers
.removeCssComments(code)
.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* Only change code below this line */
/* Only change code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.item5 {grid-area: footer;}</style>
```

View File

@ -0,0 +1,93 @@
---
id: 5a94fe3669fb03452672e45f
title: 使用 repeat 函數減少重複
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
forumTopicId: 301133
dashedName: reduce-repetition-using-the-repeat-function
---
# --description--
使用 `grid-template-columns``grid-template-rows` 定義網格結構時,你需要爲添加的每一行或每一列都輸入一個值。
如果一個網格共有 100 行且每行高度相同, 那我們就需要輸入 100 個值,這顯然不太實際。 爲此,更好的方式是使用 `repeat` 方法指定行或列的重複次數,後面加上逗號以及需要重複的值。
以下爲添加 100 行網格的例子,每行高度均爲 50px
```css
grid-template-rows: repeat(100, 50px);
```
你還可以用 repeat 方法重複多個值,並在定義網格結構時與其他值一起使用。 比如:
```css
grid-template-columns: repeat(2, 1fr 50px) 20px;
```
效果相當於:
```css
grid-template-columns: 1fr 50px 1fr 50px 20px;
```
**注意:**`1fr 50px` 重複了兩次,後面跟着 20px。
# --instructions--
請用 `repeat` 代替 `grid-template-columns` 屬性值中的重複代碼。
# --hints--
class 爲 `container` 的元素應具有 `grid-template-columns` 屬性,其屬性值應設置爲重複 3 列,且每列寬度爲 `1fr`
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line */
grid-template-columns: 1fr 1fr 1fr;
/* Only change code above this line */
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
```

View File

@ -0,0 +1,83 @@
---
id: 5a9036ee38fddaf9a66b5d34
title: 使用 CSS 網格單位來更改列和行的大小
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
forumTopicId: 301134
dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
---
# --description--
在 CSS 網格中,可以使用絕對單位(如 `px`)或相對單位(如 `em`)來定義行或列的大小。 下面的單位也可以使用:
`fr`:設置列或行佔剩餘空間的比例,
`auto`:設置列寬或行高自動等於它的內容的寬度或高度,
`%`:將列或行調整爲它的容器寬度或高度的百分比,
以下代碼爲右側預覽區中的效果:
```css
grid-template-columns: auto 50px 10% 2fr 1fr;
```
這段代碼添加了五個列。 第一列的寬與它的內容寬度相等;第二列寬 50px第三列寬是它容器的 10%;最後兩列,將剩餘的寬度平均分成三份,第四列佔兩份,第五列佔一份。
# --instructions--
生成一個包含三列的網格每列寬度分別爲1fr、100px、2fr。
# --hints--
class 爲 `container` 的元素應具有 `grid-template-columns` 屬性且屬性值應爲 `1fr 100px 2fr`
```js
assert(
code.match(
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* Only change code below this line */
grid-template-columns: auto 50px 10% 2fr 1fr;
/* Only change code above this line */
grid-template-rows: 50px 50px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
```
# --solutions--
```html
<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
```

View File

@ -0,0 +1,86 @@
---
id: 5a94fe2669fb03452672e45e
title: 使用 grid-area 創建區域模板
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
forumTopicId: 301135
dashedName: use-grid-area-without-creating-an-areas-template
---
# --description--
我們在上一次挑戰中學到的 `grid-area` 屬性還有另一種使用方式。 如果網格中沒有定義區域模板,你也可以像這樣爲它添加一個模板:
```css
item1 { grid-area: 1/1/2/4; }
```
這裏使用了你之前學習的網格線編號來定義網格項的區域。 上例中數字代表這些值:
```css
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
```
因此,示例中的網格項將佔用第 1 條水平網格線(起始)和第 2 條水平網格線(終止)之間的行,及第 1 條垂直網格線(起始)和第 4 條垂直網格線(終止)之間的列。
# --instructions--
請用 `grid-area` 屬性將 class 爲 `item5` 的元素放置在第 3 條和第 4 條水平網格線,以及第 1 條和第 4 條垂直網格線之間的區域內。
# --hints--
class 爲 `item5` 的元素應具有 `grid-area` 屬性,且位於水平第三和第四條線、垂直第一和第四條線之間的區域。
```js
assert(
code.match(
/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* Only change code below this line */
/* Only change code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>.item5 {grid-area: 3/1/4/4;}</style>
```

View File

@ -0,0 +1,139 @@
---
id: 5a90372638fddaf9a66b5d38
title: 使用 grid-column 來控制空間大小
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
forumTopicId: 301136
dashedName: use-grid-column-to-control-spacing
---
# --description--
到目前爲止,所有的討論都是圍繞網格容器的。 `grid-column` 屬性是我們要討論的,第一個用於網格項本身的屬性。
網格中,假想的水平線和垂直線被稱爲<dfn>lines</dfn>。 這些線在網格的左上角從 1 開始編號,垂直線向右、水平線向下累加計數。
這是一個 3x3 網格的線條:
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>列線</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>行線</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
要設置一個網格項佔據幾列,你可以使用 `grid-column` 屬性加上網格線條的編號來定義網格項開始和結束的位置。
示例如下:
```css
grid-column: 1 / 3;
```
這會讓網格項從左側第一條線開始到第三條線結束,佔用兩列。
# --instructions--
請讓 class 爲 `item5` 的網格項佔用網格的最後兩列。
# --hints--
class 爲 `item5` 的元素應具有 `grid-column` 屬性。
```js
assert(
__helpers
.removeWhiteSpace($('style').text())
.match(/\.item5{.*grid-column:.*}/g)
);
```
class 爲 `item5` 的元素應具有 `grid-column` 屬性,其屬性值應將元素設置爲佔用網格的最後兩列。
```js
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
const result = colStart.toString() + colEnd.toString();
const correctResults = [
'24',
'2-1',
'2span 2',
'2span2',
'span 2-1',
'-12',
'span 2span 2',
'span 2auto',
'autospan 2'
];
assert(correctResults.includes(result));
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* Only change code below this line */
/* Only change code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```

View File

@ -0,0 +1,122 @@
---
id: 5a90373638fddaf9a66b5d39
title: 使用 grid-row 來控制空間大小
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
forumTopicId: 301137
dashedName: use-grid-row-to-control-spacing
---
# --description--
和設置一個網格項佔用多列類似,你也可以設置它佔用多行。 你可以使用 `grid-row` 屬性來定義一個網格項開始和結束的水平線。
# --instructions--
請讓 class 爲 `item5` 的元素佔用最後兩行。
# --hints--
class 爲 `item5` 的元素應具有 `grid-row` 屬性。
```js
assert(
__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
);
```
class 爲 `item5` 的元素應具有 `grid-row` 屬性,其屬性值應將元素設置爲佔用網格的最後兩行。
```js
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
const result = rowStart.toString() + rowEnd.toString();
const correctResults = [
'24',
'2-1',
'2span 2',
'2span2',
'span 2-1',
'-12',
'span 2span 2',
'span 2auto',
'autospan 2'
];
assert(correctResults.includes(result));
```
# --seed--
## --seed-contents--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
/* Only change code below this line */
/* Only change code above this line */
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```
# --solutions--
```html
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
grid-row: 2 / 4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
```

View File

@ -0,0 +1,174 @@
---
id: 5a94fe7769fb03452672e463
title: 使用媒體查詢創建響應式佈局
challengeType: 0
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
forumTopicId: 301138
dashedName: use-media-queries-to-create-responsive-layouts
---
# --description--
將 CSS 網格與使用媒體查詢結合使用,如使用媒體查詢重新排列網格區域、更改網格尺寸以及重新排列網格項位置,我們可以讓製作出的網站更具響應性。
在右側的預覽區中,當網頁可視區域的寬不小於 300px 時,列數從 1 變爲 2。 並且廣告advertisement區域會完全佔據左列。
# --instructions--
當網頁可視區域的寬不小於 `400px` 時,請讓 header 區域完全佔據最頂行footer 區域完全佔據最底行。
# --hints--
當網頁可視區域的寬度爲 `400px` 或以上時class 爲 `container` 的元素應具有 `grid-template-areas` 屬性,其屬性值能夠使 footer 和 header 區域分別佔據頂行和底行advert 和 content 區域分別佔據中間行的左列和右列。
```js
assert(
__helpers
.removeCssComments(code)
.match(
/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
)
);
```
# --seed--
## --seed-contents--
```html
<style>
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"header"
"advert"
"content"
"footer";
}
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
}
@media (min-width: 400px){
.container{
grid-template-areas:
/* Only change code below this line */
"advert header"
"advert content"
"advert footer";
/* Only change code above this line */
}
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">content</div>
<div class="item4">footer</div>
</div>
```
# --solutions--
```html
<style>
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 50px auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"header"
"advert"
"content"
"footer";
}
@media (min-width: 300px){
.container{
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
}
@media (min-width: 400px){
.container{
grid-template-areas:
"header header"
"advert content"
"footer footer";
}
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">content</div>
<div class="item4">footer</div>
</div>
```