chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Aggiungere colonne con grid-template-columns
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
|
||||
forumTopicId: 301117
|
||||
dashedName: add-columns-with-grid-template-columns
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Creando semplicemente un elemento griglia non arriverai molto lontano. Dovrai anche definire la struttura della griglia. Per aggiungere alcune colonne alla griglia, utilizza la proprietà `grid-template-columns` in un contenitore griglia come mostrato di seguito:
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px;
|
||||
}
|
||||
```
|
||||
|
||||
Questo darà alla tua griglia due colonne larghe 50px ciascuna. Il numero di parametri forniti alla proprietà `grid-template-columns` indica il numero di colonne nella griglia, e il valore di ciascun parametro indica la larghezza di ogni colonna.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assegna al contenitore della griglia tre colonne di larghezza `100px` ciascuna.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-columns` con tre unità di `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: Aggiungere la spaziatura più velocemente con grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
|
||||
forumTopicId: 301118
|
||||
dashedName: add-gaps-faster-with-grid-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`grid-gap` è un'abbreviazione per `grid-row-gap` e `grid-column-gap` visti nelle due sfide precedenti, che è più conveniente da usare. Se `grid-gap` ha un valore, creerà uno spazio tra tutte le righe e le colonne. Se sono presenti due valori invece utilizzerà il primo per impostare lo spazio tra le righe e il secondo per le colonne.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizza `grid-gap` per introdurre uno spazio di `10px` tra le righe e uno spazio di `20px` tra le colonne.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-gap` che introduce uno spazio di `10px` tra le righe e uno spazio di `20px` tra le colonne.
|
||||
|
||||
```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: Aggiungere righe con grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
|
||||
forumTopicId: 301119
|
||||
dashedName: add-rows-with-grid-template-rows
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La griglia che hai creato nell'ultima sfida imposterà automaticamente il numero di righe. Per modificare manualmente le righe, utilizza la proprietà `grid-template-rows` nello stesso modo in cui hai utilizzato `grid-template-columns` nella sfida precedente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi alla griglia due righe lunghe `50px` ciascuna.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-rows` con due unità di `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: Allineare tutti gli elementi orizzontalmente usando justify-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
|
||||
forumTopicId: 301120
|
||||
dashedName: align-all-items-horizontally-using-justify-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A volte si desidera che tutti gli elementi nella griglia CSS condividano lo stesso allineamento. Puoi utilizzare le proprietà apprese in precedenza e allinearle individualmente, oppure puoi allinearle tutte in una volta orizzontalmente utilizzando `justify-items` sul tuo contenitore griglia. Questa proprietà può accettare tutti i valori che hai appreso nelle due sfide precedenti, con la differenza che sposterà **tutti** gli elementi nella nostra griglia all'allineamento desiderato.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa questa proprietà per centrare tutti gli elementi orizzontalmente.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `justify-items` con il valore di `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: Allineare tutti gli elementi verticalmente utilizzando align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
|
||||
forumTopicId: 301121
|
||||
dashedName: align-all-items-vertically-using-align-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'uso della proprietà `align-items` su un contenitore griglia imposterà l'allineamento verticale per tutti gli elementi nella griglia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Ora usalo per spostare tutti gli elementi alla fine di ogni cella.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `align-items` con il valore di `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: Allineare un elemento orizzontalmente usando justify-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
|
||||
forumTopicId: 301122
|
||||
dashedName: align-an-item-horizontally-using-justify-self
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nella griglia CSS, il contenuto di ogni elemento si trova in un riquadro denominato <dfn>cella</dfn>. Puoi allineare orizzontalmente la posizione del contenuto all'interno della sua cella utilizzando la proprietà `justify-self` su un elemento della griglia. Per impostazione predefinita, questa proprietà ha un valore di `stretch`, che farà sì che il contenuto riempia l'intera larghezza della cella. Questa proprietà della griglia CSS accetta anche altri valori:
|
||||
|
||||
`start`: allinea il contenuto alla sinistra della cella,
|
||||
|
||||
`center`: allinea il contenuto al centro della cella,
|
||||
|
||||
`end`: allinea il contenuto alla destra della cella.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizza la proprietà `justify-self` per centrare l'elemento di classe `item2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item2` dovrebbe avere una proprietà `justify-self` con il valore `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: Allineare un elemento verticalmente usando align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
|
||||
forumTopicId: 301123
|
||||
dashedName: align-an-item-vertically-using-align-self
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proprio come puoi allineare un elemento orizzontalmente, c'è un modo per allinearlo anche verticalmente. Per farlo, utilizza la proprietà `align-self` su un elemento. Questa proprietà accetta tutti gli stessi valori di `justify-self` dell'ultima sfida.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Allinea verticalmente l'elemento di classe `item3` all'estremità `end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item3` dovrebbe avere una proprietà `align-self` con il valore di `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: Creare uno spazio tra le colonne usando grid-column-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
|
||||
forumTopicId: 301124
|
||||
dashedName: create-a-column-gap-using-grid-column-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finora, nelle griglie che hai creato le colonne erano attaccate l'una contro l'altra. A volte potresti volere uno spazio tra le colonne. Per aggiungere uno spazio tra le colonne, utilizza la proprietà `grid-column-gap` in questo modo:
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
```
|
||||
|
||||
Questo crea 10px di spazio vuoto tra tutte le nostre colonne.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assegna alle colonne nella griglia una spaziatura di `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-column-gap` con il valore di `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: Creare uno spazio tra le righe usando grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
|
||||
forumTopicId: 301125
|
||||
dashedName: create-a-row-gap-using-grid-row-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puoi aggiungere uno spazio tra le righe di una griglia utilizzando `grid-row-gap` nello stesso modo in cui hai aggiunto uno spazio tra le colonne nella sfida precedente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea uno spazio per le righe alto `5px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-row-gap` con un valore di `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: Creare layout flessibili utilizzando auto-fill
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
|
||||
forumTopicId: 301126
|
||||
dashedName: create-flexible-layouts-using-auto-fill
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La funzione repeagt viene fornita con un'opzione chiamata <dfn>auto-fill</dfn>. Questo ti consente di inserire automaticamente il maggior numero possibile di righe o colonne della dimensione desiderata, in base alle dimensioni del contenitore. Puoi creare layout flessibili combinando `auto-fill` con `minmax`, in questo modo:
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
Quando il contenitore cambia dimensione, questa configurazione continua a inserire colonne di 60px e ad allargarle finché non ha la possibilità di inserirne un'altra. **Nota:** se il contenitore non riesce a contenere tutti i tuoi elementi in una riga, li sposterà in una nuova.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nella prima griglia, utilizza `auto-fill` con `repeat` per riempire la griglia con colonne che hanno una larghezza minima di `60px` e massima di `1fr`. Ridimensiona quindi l'anteprima per vedere auto-fill in azione.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-columns` con `repeat` e `auto-fill` che riempiranno la griglia con colonne che hanno una larghezza minima di `60px` e massima di `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: Creare layout flessibili utilizzando auto-fit
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
||||
forumTopicId: 301127
|
||||
dashedName: create-flexible-layouts-using-auto-fit
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`auto-fit` funziona in modo quasi identico ad `auto-fill`. L'unica differenza è che quando la dimensione del contenitore supera la dimensione di tutti gli elementi combinati, `auto-fill` continua a inserire righe o colonne vuote e spinge gli elementi di lato, mentre `auto-fit` comprime quelle righe o colonne vuote e allunga gli elementi per adattarli alle dimensioni del contenitore.
|
||||
|
||||
**Nota:** se il tuo contenitore non riesce a contenere tutti gli elementi su una riga, li sposterà in una nuova riga.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nella seconda griglia, utilizza `auto-fit` con `repeat` per riempire la griglia con colonne che abbiano una larghezza minima di `60px` e massima di `1fr`. Ridimensiona quindi l'anteprima per vedere la differenza.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container2` dovrebbe avere una proprietà `grid-template-columns` con `repeat` e `auto-fit` che riempiranno la griglia con colonne che hanno una larghezza minima di `60px` e massima di `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: Creare griglie all'interno di griglie
|
||||
challengeType: 0
|
||||
forumTopicId: 301128
|
||||
dashedName: create-grids-within-grids
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Trasformare un elemento in una griglia influisce solo sul comportamento dei suoi discendenti diretti. Quindi, trasformando un discendente diretto in una griglia, avrai una griglia all'interno di un'altra griglia.
|
||||
|
||||
Ad esempio, impostando le proprietà `display` e `grid-template-columns` dell'elemento di classe `item3`, creerai una griglia all'interno della tua griglia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Trasforma l'elemento di classe `item3` in una griglia con due colonne di larghezza `auto` e `1fr`, utilizzando `display` e `grid-template-columns`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item3` dovrebbe avere una proprietà `grid-template-columns` con `auto` e `1fr` come valori.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `item3` dovrebbe avere una proprietà `display` con il valore `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: Creare la tua prima griglia CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
|
||||
forumTopicId: 301129
|
||||
dashedName: create-your-first-css-grid
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Trasforma qualsiasi elemento HTML in un contenitore griglia (grid) impostando la sua proprietà `display` sul valore `grid`. Questo ti dà la possibilità di utilizzare tutte le altre proprietà associate alla griglia CSS.
|
||||
|
||||
**Nota:** Nella Griglia CSS, l'elemento genitore è indicato come <dfn>container</dfn> e i suoi figli sono chiamati <dfn>items</dfn>.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia la visualizzazione del div con la classe `container` impostandola a `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `display` con un valore di `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: Dividere la griglia in un template area
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puoi raggruppare le celle della griglia in un'<dfn>area</dfn> e dare un nome personalizzato all'area. Puoi farlo usando `grid-template-areas` sul contenitore in questo modo:
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
Il codice qui sopra riunisce le tre celle superiori in un'area denominata `header`, le tre celle inferiori in un'area `footer`, e crea due aree nella riga intermedia; `advert` e `content`. **Nota:** Ogni parola nel codice rappresenta una cella e ogni coppia di virgolette rappresenta una riga. In aggiunta alle etichette personalizzate, puoi usare un punto (`.`) per designare una cella vuota nella griglia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Posiziona il template dell'area in modo che la cella etichettata `advert` diventi una cella vuota.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-areas` simile all'anteprima ma con `.` al posto dell'area `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: Limitare la dimensione dell'elemento usando la funzione minmax
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
|
||||
forumTopicId: 301131
|
||||
dashedName: limit-item-size-using-the-minmax-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
C'è un'altra funzione integrata che è possibile usare con `grid-template-columns` e `grid-template-rows` chiamata `minmax`. Essa viene utilizzata per limitare la dimensione degli oggetti quando il contenitore della griglia cambia dimensione. Per fare questo è necessario specificare l'intervallo delle dimensioni accettabili per il tuo oggetto. Ecco un esempio:
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
```
|
||||
|
||||
Nel codice sopra, `grid-template-columns` è impostato per creare due colonne; la prima è larga 100px, la seconda ha una larghezza minima di 50px e una larghezza massima di 200px.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizzando la funzione `minmax`, sostituisci `1fr` nella funzione `repeat` con una dimensione della colonna che abbia una larghezza minima di `90px` e una larghezza massima di `1fr`, e ridimensiona il pannello di anteprima per vedere l'effetto.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-columns` impostata in modo da ripetere 3 colonne con una larghezza minima di `90px` e una larghezza massima di `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: Posizionare gli oggetti nelle aree della griglia utilizzando la proprietà 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--
|
||||
|
||||
Dopo aver creato un modello di area per il contenitore griglia, come mostrato nella sfida precedente, puoi posizionare un oggetto nella tua area personalizzata facendo riferimento al nome che le hai dato. Per fare questo, si utilizza la proprietà `grid-area` su un oggetto come questo:
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
grid-area: header;
|
||||
}
|
||||
```
|
||||
|
||||
Questo consente alla griglia di sapere che vuoi che la classe `item1` vada nell'area denominata `header`. In questo caso, l'elemento userà l'intera riga in alto perché essa è definita come area di intestazione (header).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Posiziona un elemento con la classe `item5` nell'area `footer` usando la proprietà `grid-area`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item5` dovrebbe avere una proprietà `grid-area` con il valore di `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: Ridurre le ripetizioni usando la funzione repeat
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
|
||||
forumTopicId: 301133
|
||||
dashedName: reduce-repetition-using-the-repeat-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando hai usato `grid-template-columns` e `grid-template-rows` per definire la struttura di una griglia, hai inserito un valore per ogni riga o colonna che hai creato.
|
||||
|
||||
Diciamo che tu voglia una griglia con 100 righe della stessa altezza. Non è molto pratico inserire 100 valori singolarmente. Fortunatamente, c'è un modo migliore - usando la funzione `repeat` per specificare il numero di volte che vuoi che la colonna o la riga venga ripetuta, seguito da una virgola e dal valore che vuoi ripetere.
|
||||
|
||||
Ecco un esempio di come creare una griglia di 100 righe, ognuna alta 50px.
|
||||
|
||||
```css
|
||||
grid-template-rows: repeat(100, 50px);
|
||||
```
|
||||
|
||||
Puoi anche ripetere più valori con la funzione repeat e inserire la funzione tra gli altri valori nella definizione della struttura per una griglia. Ecco come si presenta:
|
||||
|
||||
```css
|
||||
grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
```
|
||||
|
||||
Questo si traduce in:
|
||||
|
||||
```css
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
**Nota:** `1fr 50px` viene ripetuto due volte seguito da 20px.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa `repeat` per rimuovere la ripetizione dalla proprietà `grid-template-columns`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-columns` impostata per ripetere 3 colonne con la larghezza di `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: Usare unità di griglia CSS per cambiare la dimensione delle colonne e delle righe
|
||||
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--
|
||||
|
||||
Puoi utilizzare unità assolute e relative come `px` e `em` nelle griglie CSS per definire la dimensione di righe e colonne. Puoi utilizzare anche queste:
|
||||
|
||||
`fr`: imposta la colonna o la riga a una frazione dello spazio disponibile,
|
||||
|
||||
`auto`: imposta automaticamente la colonna o la riga alla larghezza o all'altezza del suo contenuto,
|
||||
|
||||
`%`: regola la colonna o la riga alla percentuale di larghezza del contenitore.
|
||||
|
||||
Ecco il codice che genera l'output nell'anteprima:
|
||||
|
||||
```css
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
```
|
||||
|
||||
Questo snippet crea cinque colonne. La prima colonna è ampia quanto il suo contenuto, la seconda colonna è larga 50px, la terza colonna è pari al 10% del contenitore; lo spazio rimanente è diviso in tre sezioni, due assegnate alla quarta colonna, e una alla quinta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una griglia con tre colonne le cui larghezze sono le seguenti: 1fr, 100px e 2fr.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `container` dovrebbe avere una proprietà `grid-template-columns` che ha tre colonne con le seguenti larghezze: `1fr, 100px, and 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: Usare grid-area senza creare un modello di aree
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
|
||||
forumTopicId: 301135
|
||||
dashedName: use-grid-area-without-creating-an-areas-template
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `grid-area` che hai appreso nell'ultima sfida può essere utilizzata in un altro modo. Se la griglia non ha un modello di aree a cui fare riferimento, è possibile creare un'area per posizionare un oggetto al volo in questo modo:
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
```
|
||||
|
||||
Esso usa i numeri di riga che abbiamo visto in precedenza per definire dove sarà l'area di questo elemento. I numeri nell'esempio precedente rappresentano questi valori:
|
||||
|
||||
```css
|
||||
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
|
||||
```
|
||||
|
||||
Quindi l'elemento nell'esempio occuperà le righe tra le linee 1 e 2 e le colonne tra le linee 1 e 4.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizzando la proprietà `grid-area`, posizionare l'elemento con la classe `item5` tra la terza e la quarta linea orizzontale e tra la prima e la quarta linea verticale.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item5` dovrebbe avere una proprietà `grid-area` che le faccia riempire l'intera area tra la terza e la quarta linea orizzontale, e tra la prima e la quarta linea verticale.
|
||||
|
||||
```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: Usare grid-column per controllare la spaziatura
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
|
||||
forumTopicId: 301136
|
||||
dashedName: use-grid-column-to-control-spacing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Fino a questo punto, tutte le proprietà che sono state discusse sono per i contenitori griglia. La proprietà `grid-column` è la prima da usare sugli elementi della griglia stessi.
|
||||
|
||||
Le ipotetiche linee orizzontali e verticali che creano la griglia sono indicate come <dfn>lines</dfn>. Queste linee sono numerate a partire da 1 nell'angolo in alto a sinistra della griglia incrementando verso destra per le colonne e verso il basso per le righe.
|
||||
|
||||
Ecco come appaiono le linee di una griglia 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;'>linee delle colonne</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;'>linee delle righe</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>
|
||||
|
||||
Per controllare il numero di colonne che un elemento consumerà, è possibile utilizzare la proprietà `grid-column` in combinazione con i numeri ai quali desideri avviare e fermare l'elemento.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```css
|
||||
grid-column: 1 / 3;
|
||||
```
|
||||
|
||||
Questo farà iniziare l'oggetto dalla prima linea verticale della griglia a sinistra e lo estenderà fino alla terza linea della griglia, occupando due colonne.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fai in modo che l'elemento di classe `item5` occupi le ultime due colonne della griglia.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item5` dovrebbe avere una proprietà `grid-column`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace($('style').text())
|
||||
.match(/\.item5{.*grid-column:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `item5` dovrebbe avere una proprietà `grid-column` che produca l'occupazione delle ultime due colonne della griglia.
|
||||
|
||||
```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: Usare grid-row per controllare la spaziatura
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
|
||||
forumTopicId: 301137
|
||||
dashedName: use-grid-row-to-control-spacing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Naturalmente puoi fare in modo che gli elementi occupino più righe proprio come avviene con le colonne. Definisci le linee orizzontali da cui vuoi che un elemento inizi e si fermi usando la proprietà `grid-row` su un elemento griglia.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fai in modo che l'elemento di classe `item5` occupi le ultime due righe.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `item5` dovrebbe avere una proprietà `grid-row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `item5` dovrebbe avere una proprietà `grid-row` che comporti l'occupazione delle ultime due righe della griglia.
|
||||
|
||||
```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: Usare le Media Queries per creare layout responsivi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
|
||||
forumTopicId: 301138
|
||||
dashedName: use-media-queries-to-create-responsive-layouts
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La griglia CSS può essere un modo semplice per rendere il tuo sito più responsivo utilizzando le media query per riorganizzare le aree della griglia, cambiare le dimensioni di una griglia, e riorganizzare il posizionamento degli elementi.
|
||||
|
||||
Nell'anteprima, quando la larghezza della viewport è di 300px o più, il numero di colonne cambia da 1 a 2. L'area per gli advertisement poi occupa completamente la colonna di sinistra.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Quando la larghezza della viewport è di `400px` o più, fai in modo che l'area dell'header occupi completamente la riga superiore, e l'area del footer occupi completamente la riga inferiore.
|
||||
|
||||
# --hints--
|
||||
|
||||
Quando la viewport è di `400px` o più, la classe `container` dovrebbe avere una proprietà `grid-template-areas` in cui le aree header e footer occupano rispettivamente le righe in alto e in basso, e l'advertisement e il contenuto occupano le colonne sinistra e destra della riga centrale.
|
||||
|
||||
```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