chore(i18n,curriculum): update translations (#42629)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: Create a Column Gap Using grid-column-gap
|
||||
title: Criar um espaçamento entre colunas usando grid-column-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
|
||||
forumTopicId: 301124
|
||||
@ -9,21 +9,21 @@ dashedName: create-a-column-gap-using-grid-column-gap
|
||||
|
||||
# --description--
|
||||
|
||||
So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the `grid-column-gap` property like this:
|
||||
Até agora, nos grids que você criou, as colunas estavam todas grudadas. Às vezes, você pode querer um espaçamento entre as colunas. Para adicionar um espaço entre as colunas, use a propriedade `grid-column-gap`:
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
```
|
||||
|
||||
This creates 10px of empty space between all of our columns.
|
||||
O exemplo acima cria 10px de espaço vazio entre todas as colunas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give the columns in the grid a `20px` gap.
|
||||
Dê às colunas do grid um espaçamento de `20px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-column-gap` property that has the value of `20px`.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-column-gap` com o valor de `20px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -55,7 +55,7 @@ assert(
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: Create a Row Gap using grid-row-gap
|
||||
title: Criar um espaçamento entre linhas usando grid-row-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
|
||||
forumTopicId: 301125
|
||||
@ -9,15 +9,15 @@ dashedName: create-a-row-gap-using-grid-row-gap
|
||||
|
||||
# --description--
|
||||
|
||||
You can add a gap in between the rows of a grid using `grid-row-gap` in the same way that you added a gap in between columns in the previous challenge.
|
||||
Você pode adicionar um espaçamento entre as linhas de um grid usando `grid-row-gap` da mesma forma que adicionou um espaçamento entre as colunas no desafio anterior.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Create a gap for the rows that is `5px` tall.
|
||||
Crie um espaço entre as linhas com `5px` de altura.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-row-gap` property that has the value of `5px`.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-row-gap` com o valor de `5px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -47,7 +47,7 @@ assert(
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: Create Flexible Layouts Using auto-fill
|
||||
title: Criar layouts flexíveis usando auto-fill
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
|
||||
forumTopicId: 301126
|
||||
@ -9,21 +9,21 @@ dashedName: create-flexible-layouts-using-auto-fill
|
||||
|
||||
# --description--
|
||||
|
||||
The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining `auto-fill` with `minmax`, like this:
|
||||
A função de repetição vem com uma opção chamada <dfn>preenchimento automático</dfn>. Ela permite que você insira automaticamente tantas linhas ou colunas do tamanho desejado quanto possível, dependendo do tamanho do grid container. Você pode criar layouts flexíveis ao combinar `auto-fill` com `minmax`, assim:
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. **Note:** If your container can't fit all your items on one row, it will move them down to a new one.
|
||||
Quando o tamanho do contêiner muda, esta configuração continua inserindo colunas de 60px e esticando-as até que seja possível inserir outra. **Observação:** se não for possível ajustar todos os grid items no grid container, os grid items que ficarem de fora do grid container serão movidos para uma nova linha.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the first grid, use `auto-fill` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see auto-fill in action.
|
||||
No primeiro grid, use `auto-fill` com `repeat` para preencher o grid com colunas que tenham uma largura mínima de `60px` e máxima de `1fr`. Em seguida, redimensione a janela do navegador para ver o preenchimento automático em ação.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-columns` property with `repeat` and `auto-fill` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`.
|
||||
A classe `container` deve ter a propriedade `grid-template-columns` com os valores `repeat` e `auto-fill` que devem preencher o grid com colunas de largura mínima de `60px` e máxima de `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -96,7 +96,7 @@ assert(
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
@ -104,14 +104,14 @@ assert(
|
||||
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;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: Create Flexible Layouts Using auto-fit
|
||||
title: Criar layouts flexíveis usando auto-fit
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
||||
forumTopicId: 301127
|
||||
@ -9,17 +9,17 @@ dashedName: create-flexible-layouts-using-auto-fit
|
||||
|
||||
# --description--
|
||||
|
||||
`auto-fit` works almost identically to `auto-fill`. The only difference is that when the container's size exceeds the size of all the items combined, `auto-fill` keeps inserting empty rows or columns and pushes your items to the side, while `auto-fit` collapses those empty rows or columns and stretches your items to fit the size of the container.
|
||||
`auto-fit` funciona quase de forma idêntica ao `auto-fill`. A única diferença é que, quando o tamanho do grid container for maior que a soma da largura de todos os grid items, o `auto-fill` continua inserindo linhas ou colunas vazias e empurra os grid items para o lado, enquanto o `auto-fit` estica os grid items para caber no tamanho do grid container.
|
||||
|
||||
**Note:** If your container can't fit all your items on one row, it will move them down to a new one.
|
||||
**Observação:** se não for possível ajustar todos os itens em uma linha, eles serão movidos para uma nova linha.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the second grid, use `auto-fit` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see the difference.
|
||||
No segundo grid, use `auto-fit` com `repeat` para preencher o grid com colunas que tenham uma largura mínima de `60px` e máxima de `1fr`. Em seguida, redimensione a janela do navegador para ver o auto-fit em ação.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and a maximum of `1fr`.
|
||||
A classe `container2` deve ter a propriedade `grid-template-columns` com os valores `repeat` e `auto-fit` que devem preencher o grid com colunas de largura mínima de `60px` e máxima de `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: Create Grids within Grids
|
||||
title: Criar grids dentro de grids
|
||||
challengeType: 0
|
||||
forumTopicId: 301128
|
||||
dashedName: create-grids-within-grids
|
||||
@ -8,17 +8,17 @@ dashedName: create-grids-within-grids
|
||||
|
||||
# --description--
|
||||
|
||||
Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.
|
||||
Transformar um elemento em um grid afeta apenas o comportamento de seus elementos filhos diretos. Portanto, ao transformar um elemento filho em um grid, você tem um grid dentro de um grid.
|
||||
|
||||
For example, by setting the `display` and `grid-template-columns` properties of the element with the `item3` class, you create a grid within your grid.
|
||||
Por exemplo, ao definir as propriedades `display` e `grid-template-columns` do elemento com a classe `item3`, você cria um grid dentro de um grid.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Turn the element with the `item3` class into a grid with two columns with a width of `auto` and `1fr` using `display` and `grid-template-columns`.
|
||||
Transforme o elemento com a classe `item3` em um grid de duas colunas com uma largura de `auto` e `1fr` usando as propriedades `display` e `grid-template-columns`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item3` class should have a `grid-template-columns` property with `auto` and `1fr` as values.
|
||||
O elemento de classe `item3` deve ter a propriedade `grid-template-columns` com os valores de `auto` e `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -28,7 +28,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`item3` class should have a `display` property with the value of `grid`.
|
||||
O elemento de classe `item3` deve ter a propriedade `display` com o valor de `grid`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: Create Your First CSS Grid
|
||||
title: Criar seu primeiro grid
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
|
||||
forumTopicId: 301129
|
||||
@ -9,17 +9,17 @@ dashedName: create-your-first-css-grid
|
||||
|
||||
# --description--
|
||||
|
||||
Turn any HTML element into a grid container by setting its `display` property to `grid`. This gives you the ability to use all the other properties associated with CSS Grid.
|
||||
Transforme qualquer elemento HTML em um grid container, definindo sua propriedade `display` com o valor de `grid`. Isso permite que você use todas as outras propriedades associadas ao CSS Grid.
|
||||
|
||||
**Note:** In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
|
||||
**Observação:** no CSS Grid, o elemento pai é conhecido como <dfn>contêiner</dfn> (grid container, no inglês) e seus filhos são chamados de <dfn>itens</dfn> (grid items, no inglês).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the display of the div with the `container` class to `grid`.
|
||||
Altere a exibição da div com a classe `container` para `grid`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `display` property with a value of `grid`.
|
||||
O elemento de classe `container` deve ter a propriedade `display` com o valor de `grid`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
@ -43,7 +43,7 @@ assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
background: LightGray;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: Divide the Grid Into an Area Template
|
||||
title: Dividir o grid em áreas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
forumTopicId: 301130
|
||||
@ -9,7 +9,7 @@ dashedName: divide-the-grid-into-an-area-template
|
||||
|
||||
# --description--
|
||||
|
||||
You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using `grid-template-areas` on the container like this:
|
||||
Você pode agrupar as células do grid em uma <dfn>área</dfn> e dar a esta um nome personalizado. Faça isso usando a propriedade `grid-template-areas` no grid container:
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
@ -18,15 +18,15 @@ grid-template-areas:
|
||||
"footer footer footer";
|
||||
```
|
||||
|
||||
The code above merges the top three cells together into an area named `header`, the bottom three cells into a `footer` area, and it makes two areas in the middle row; `advert` and `content`. **Note:** Every word in the code represents a cell and every pair of quotation marks represent a row. In addition to custom labels, you can use a period (`.`) to designate an empty cell in the grid.
|
||||
O código acima mescla as três células superiores em uma área chamada `header`, as três células inferiores em uma área chamada `footer` e faz duas áreas na linha do meio, `advert` e `content`. **Observação:** cada palavra no código representa uma célula e cada par de aspas representa uma linha. Além de nomes personalizados, você pode usar um ponto (`.`) para criar uma célula vazia no grid.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Place the area template so that the cell labeled `advert` becomes an empty cell.
|
||||
Crie um modelo de área de forma que a célula com o nome `advert` se torne uma célula vazia.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-areas` property similar to the preview but with`.` instead of the `advert` area.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-template-areas` semelhante ao do exemplo, mas com um `.` (ponto final) em vez do nome `advert`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: Limit Item Size Using the minmax Function
|
||||
title: Limitar o tamanho do item usando a função minmax
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
|
||||
forumTopicId: 301131
|
||||
@ -9,21 +9,21 @@ dashedName: limit-item-size-using-the-minmax-function
|
||||
|
||||
# --description--
|
||||
|
||||
There's another built-in function to use with `grid-template-columns` and `grid-template-rows` called `minmax`. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
|
||||
Existe uma outra função que pode ser usada com as propriedades `grid-template-columns` e `grid-template-rows` chamada `minmax`. Ela é usada para limitar o tamanho dos grid items quando o grid container muda de tamanho. Para fazer isso, você precisa especificar um limite de tamanho aceitável para o seu grid item. Um exemplo:
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
```
|
||||
|
||||
In the code above, `grid-template-columns` is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
|
||||
No código acima, `grid-template-columns` é definido para criar duas colunas; a primeira tem 100px de largura e a segunda tem a largura mínima de 50px e a largura máxima de 200px.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Using the `minmax` function, replace the `1fr` in the `repeat` function with a column size that has the minimum width of `90px` and the maximum width of `1fr`, and resize the preview panel to see the effect.
|
||||
Usando a função `minmax`, substitua `1fr` na função `repeat` por um tamanho de coluna que tenha a largura mínima de `90px` e a largura máxima de `1fr`, e redimensione a janela do navegador para ver o efeito.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the minimum width of `90px` and maximum width of `1fr`.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-template-columns` configurada para repetir 3 colunas com largura mínima de `90px` e largura máxima de `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: Place Items in Grid Areas Using the grid-area Property
|
||||
title: Definir a posição dos itens usando a propriedade grid-area
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
|
||||
forumTopicId: 301132
|
||||
@ -9,7 +9,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
|
||||
# --description--
|
||||
|
||||
After creating an area template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this:
|
||||
Depois de criar um modelo de área para o seu grid container, como mostrado no desafio anterior, você pode definir a posição de um item em uma área referenciando o nome que você deu a ele. Para fazer isso, você deve usar a propriedade `grid-area` em um item:
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
@ -17,15 +17,15 @@ After creating an area template for your grid container, as shown in the previou
|
||||
}
|
||||
```
|
||||
|
||||
This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the header area.
|
||||
Isso informa ao grid que você deseja que a classe `item1` vá para a área chamada `header`. Nesse caso, o item usará toda a linha superior porque essa linha inteira foi nomeada como a área do cabeçalho (header).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Place an element with the `item5` class in the `footer` area using the `grid-area` property.
|
||||
Coloque o elemento com a classe `item5` na área `footer` usando a propriedade `grid-area`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` class should have a `grid-area` property that has the value of `footer`.
|
||||
O elemento de classe `item5` deve ter a propriedade `grid-area` com o valor de `footer`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -50,7 +50,7 @@ assert(
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: Reduce Repetition Using the repeat Function
|
||||
title: Reduzir repetição usando a função repeat
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
|
||||
forumTopicId: 301133
|
||||
@ -9,37 +9,37 @@ dashedName: reduce-repetition-using-the-repeat-function
|
||||
|
||||
# --description--
|
||||
|
||||
When you used `grid-template-columns` and `grid-template-rows` to define the structure of a grid, you entered a value for each row or column you created.
|
||||
Ao usar `grid-template-columns` e `grid-template-rows` para definir a estrutura de um grid, você inseriu um valor para cada linha ou coluna criada.
|
||||
|
||||
Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the `repeat` function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
|
||||
Digamos que você queira um grid com 100 linhas da mesma altura. Não é muito prático inserir 100 valores manualmente. Felizmente, existe uma maneira melhor - usando a função `repeat` para especificar o número de vezes que você deseja que sua coluna ou linha seja repetida, seguida por uma vírgula e o valor que deseja repetir.
|
||||
|
||||
Here's an example that would create the 100 row grid, each row at 50px tall.
|
||||
Um exemplo que criaria um grid de 100 linhas, cada linha com 50px de altura:
|
||||
|
||||
```css
|
||||
grid-template-rows: repeat(100, 50px);
|
||||
```
|
||||
|
||||
You can also repeat multiple values with the repeat function and insert the function amongst other values when defining a grid structure. Here's what that looks like:
|
||||
Você pode declarar mias de um tamanho ao usar a função de repetição e também usá-la em conjunto de outros tamanhos quando estiver criando a estrutura de um grid. Um exemplo:
|
||||
|
||||
```css
|
||||
grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
```
|
||||
|
||||
This translates to:
|
||||
Também pode ser lido assim:
|
||||
|
||||
```css
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
**Note:** The `1fr 50px` is repeated twice followed by 20px.
|
||||
**Observação:** os valores `1fr 50px` são repetidos duas vezes seguido por 20px.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `repeat` to remove repetition from the `grid-template-columns` property.
|
||||
Use a função `repeat` para remover a repetição de valores na propriedade `grid-template-columns`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the width of `1fr`.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-template-columns` configurada para criar 3 colunas com a largura de `1fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: Use CSS Grid units to Change the Size of Columns and Rows
|
||||
title: Usar unidades específicas de grid para alterar o tamanho de colunas e linhas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
|
||||
forumTopicId: 301134
|
||||
@ -9,29 +9,29 @@ dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
|
||||
|
||||
# --description--
|
||||
|
||||
You can use absolute and relative units like `px` and `em` in CSS Grid to define the size of rows and columns. You can use these as well:
|
||||
Você pode usar unidades absolutas e relativas como `px` e `em` no CSS Grid para definir o tamanho das linhas e colunas. Você também pode usar estas:
|
||||
|
||||
`fr`: sets the column or row to a fraction of the available space,
|
||||
`fr`: define a coluna ou linha para uma fração do espaço disponível,
|
||||
|
||||
`auto`: sets the column or row to the width or height of its content automatically,
|
||||
`auto`: define a coluna ou linha para a largura ou altura de seu conteúdo automaticamente,
|
||||
|
||||
`%`: adjusts the column or row to the percent width of its container.
|
||||
`%`: ajusta a coluna ou linha para a largura percentual de seu contêiner.
|
||||
|
||||
Here's the code that generates the output in the preview:
|
||||
Este é o código que gera o resultado na visualização a seguir:
|
||||
|
||||
```css
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
```
|
||||
|
||||
This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.
|
||||
Este código cria cinco colunas. A primeira coluna tem a largura de seu conteúdo, a segunda coluna tem 50px, a terceira coluna tem 10% de seu contêiner e nas duas últimas colunas o espaço restante é dividido em três seções, duas são alocadas para a quarta coluna e uma para a quinta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
|
||||
Faça um grid com três colunas cujas larguras possuam as seguintes medidas, respectivamente: 1fr, 100px e 2fr.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`.
|
||||
A classe `container` deve ter a propriedade `grid-template-columns` configurada para criar 3 colunas com as seguintes larguras: `1fr, 100px, 2fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: Use grid-area Without Creating an Areas Template
|
||||
title: Usar grid-area sem criar um modelo de áreas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
|
||||
forumTopicId: 301135
|
||||
@ -9,27 +9,27 @@ dashedName: use-grid-area-without-creating-an-areas-template
|
||||
|
||||
# --description--
|
||||
|
||||
The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
|
||||
A propriedade `grid-area` que você aprendeu no último desafio pode ser usada de outra maneira. Se o seu grid não possuir um modelo de áreas para fazer referência, você pode rapidamente definir uma área para um item assim:
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
```
|
||||
|
||||
This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:
|
||||
Esta abordagem usa os números de linha que você aprendeu anteriormente para definir onde ficará a área deste item. Os números no exemplo acima podem ser lidos assim:
|
||||
|
||||
```css
|
||||
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
|
||||
```
|
||||
|
||||
So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.
|
||||
Portanto, o item no exemplo permanecerá entre as linhas 1 e 2 e entre as colunas 1 e 4.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Using the `grid-area` property, place the element with `item5` class between the third and fourth horizontal lines and between the first and fourth vertical lines.
|
||||
Usando a propriedade `grid-area`, coloque o elemento com a classe `item5` entre a terceira e a quarta linha e entre a primeira e a quarta coluna.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `item5` class should have a `grid-area` property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines.
|
||||
O elemento de classe `item5` deve ter a propriedade `grid-area` definida para ocupar toda a área entre a terceira e a quarta linha e a primeira e a quarta coluna.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: Use grid-column to Control Spacing
|
||||
title: Usar grid-column para controlar a posição das colunas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
|
||||
forumTopicId: 301136
|
||||
@ -9,31 +9,31 @@ dashedName: use-grid-column-to-control-spacing
|
||||
|
||||
# --description--
|
||||
|
||||
Up to this point, all the properties that have been discussed are for grid containers. The `grid-column` property is the first one for use on the grid items themselves.
|
||||
Até este ponto, todas as propriedades que foram discutidas são destinadas para o grid container. A propriedade `grid-column` é usada nos grid items.
|
||||
|
||||
The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.
|
||||
As linhas horizontais e verticais que criam o grid são chamadas de <dfn>linhas</dfn> (lines). Essas linhas são numeradas começando com 1 no canto superior esquerdo do grid e movem para a direita para colunas e para baixo para linhas.
|
||||
|
||||
This is what the lines look like for a 3x3 grid:
|
||||
Esta é a aparência das linhas em um grid 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;'>column lines</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;'>row lines</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>
|
||||
<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;'>linhas de coluna</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;'>linhas de linha (row)</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>
|
||||
|
||||
To control the number of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at.
|
||||
Para controlar a quantidade de colunas que um item ocupará, você pode usar a propriedade `grid-column` definindo o número da linha em que deseja que o item comece e pare.
|
||||
|
||||
Here's an example:
|
||||
Um exemplo:
|
||||
|
||||
```css
|
||||
grid-column: 1 / 3;
|
||||
```
|
||||
|
||||
This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
|
||||
Isso fará com que o item comece na primeira linha vertical o grid à esquerda e se estenda até a 3ª linha do grid, ocupando duas colunas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make the item with the class `item5` consume the last two columns of the grid.
|
||||
Faça com que o item com a classe `item5` ocupe as duas últimas colunas do grid.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` class should have a `grid-column` property.
|
||||
O elemento de classe `item5` deve ter a propriedade `grid-column`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`item5` class should have a `grid-column` property which results in it consuming the last two columns of the grid.
|
||||
O elemento de classe `item5` deve ter a propriedade `grid-column` definida para que o elemento ocupe as duas últimas colunas do grid.
|
||||
|
||||
```js
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: Use Media Queries to Create Responsive Layouts
|
||||
title: Usar media queries para criar layouts responsivos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
|
||||
forumTopicId: 301138
|
||||
@ -9,17 +9,17 @@ dashedName: use-media-queries-to-create-responsive-layouts
|
||||
|
||||
# --description--
|
||||
|
||||
CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.
|
||||
O CSS Grid pode tornar ainda mais fácil a tarefa de criar um site responsivo ao usar media queries para reorganizar as áreas do grid, alterar as dimensões do grid e reorganizar a posição dos itens.
|
||||
|
||||
In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.
|
||||
Na visualização ao lado, quando a largura da janela for 300px ou mais, o número de colunas muda de 1 para 2. A área do anúncio então ocupa a coluna da esquerda completamente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
When the viewport width is `400px` or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
|
||||
Quando a largura da janela de visualização for de `400px` ou mais, faça com que a área do cabeçalho (header) ocupe completamente a linha superior e a área do rodapé (footer) ocupe completamente a linha inferior.
|
||||
|
||||
# --hints--
|
||||
|
||||
When the viewport is `400px` or more, `container` class should have a `grid-template-areas` property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
|
||||
Quando a janela de visualização for maior que `400px`, o elemento de classe `container` deve ter a propriedade `grid-template-areas` na qual as áreas de cabeçalho e rodapé ocupam o topo e as linhas inferiores, respectivamente, e o anúncio e o conteúdo ocupam as colunas esquerda e direita da linha do meio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user