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)
committed by
GitHub
GitHub
parent
e46e80e08f
commit
3da4be21bb
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
@ -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>
|
||||
```
|
||||
Reference in New Issue
Block a user