chore(i18n,curriculum): update translations (#42568)
This commit is contained in:
camperbot
GitHub
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: Add Columns with grid-template-columns
|
||||
title: Criar colunas com grid-template-columns
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
|
||||
forumTopicId: 301117
|
||||
@@ -9,7 +9,7 @@ dashedName: add-columns-with-grid-template-columns
|
||||
|
||||
# --description--
|
||||
|
||||
Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the `grid-template-columns` property on a grid container as demonstrated below:
|
||||
Só criar um elemento grid não faz muita coisa. Você também precisa definir a estrutura do grid. Para adicionar colunas ao grid, use a propriedade `grid-template-columns` em um grid container, como demonstrado abaixo:
|
||||
|
||||
```css
|
||||
.container {
|
||||
@@ -18,15 +18,15 @@ Simply creating a grid element doesn't get you very far. You need to define the
|
||||
}
|
||||
```
|
||||
|
||||
This will give your grid two columns that are each 50px wide. The number of parameters given to the `grid-template-columns` property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
|
||||
Isso vai dar ao grid duas colunas, cada uma com 50px de largura. O número dos parâmetros dados à propriedade `grid-template-columns` indica o número de colunas no grid. O valor de cada parâmetro indica a largura de cada coluna.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Give the grid container three columns that are each `100px` wide.
|
||||
Dê ao grid container três colunas com `100px` de largura.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-columns` property with three units of `100px`.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-template-columns` com três parâmetros de `100px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -55,7 +55,7 @@ assert(
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: Add Gaps Faster with grid-gap
|
||||
title: Criar espaçamentos com grid-gap
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
|
||||
forumTopicId: 301118
|
||||
@@ -9,15 +9,15 @@ dashedName: add-gaps-faster-with-grid-gap
|
||||
|
||||
# --description--
|
||||
|
||||
`grid-gap` is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. If `grid-gap` has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
|
||||
`grid-gap` é uma propriedade abreviada para `grid-row-gap` e `grid-column-gap` dos dois últimos desafios, que é mais conveniente usar. Se `grid-gap` possui apenas um valor, ele vai criar um espaçamento entre todas as linhas e colunas. No entanto, se houver dois valores, o primeiro valor será usado para definir o espaçamento entre as linhas e o segundo para definir o espaçamento entre as colunas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between the columns.
|
||||
Use a propriedade `grid-gap` para criar um espaçamento de `10px` entre as linhas e um espaçamento de `20px` entre as colunas.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-gap` property that introduces a `10px` gap between the rows and a `20px` gap between the columns.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-gap` que cria um espaçamento de `10px` entre as linhas e um espaçamento de `20px` entre as colunas.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -49,7 +49,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: 5a9036e138fddaf9a66b5d33
|
||||
title: Add Rows with grid-template-rows
|
||||
title: Criar linhas com grid-template-rows
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
|
||||
forumTopicId: 301119
|
||||
@@ -9,15 +9,15 @@ dashedName: add-rows-with-grid-template-rows
|
||||
|
||||
# --description--
|
||||
|
||||
The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in the previous challenge.
|
||||
O grid que você criou no último desafio definirá o número de linhas automaticamente. Para ajustar as linhas manualmente, use a propriedade `grid-template-rows` da mesma maneira que você usou `grid-template-columns` no desafio anterior.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add two rows to the grid that are `50px` tall each.
|
||||
Adicione duas linhas ao grid com `50px` de altura cada.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `grid-template-rows` property with two units of `50px`.
|
||||
O elemento de classe `container` deve ter a propriedade `grid-template-rows` com dois valores de `50px`. Cada valor deve estar separado por um espaço.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -47,7 +47,7 @@ assert(
|
||||
grid-template-columns: 100px 100px 100px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: Align All Items Horizontally using justify-items
|
||||
title: Alinhar todos os itens horizontalmente usando justify-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
|
||||
forumTopicId: 301120
|
||||
@@ -9,15 +9,15 @@ dashedName: align-all-items-horizontally-using-justify-items
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using `justify-items` on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move **all** the items in our grid to the desired alignment.
|
||||
Às vezes, você quer que todos os itens no seu grid possuam o mesmo alinhamento. Você pode usar as propriedades aprendidas anteriormente e alinhá-los individualmente ou pode alinhá-los todos de uma vez horizontalmente usando a propriedade `justify-items` em seu grid container. Essa propriedade aceita todos os mesmos valores que você aprendeu nos dois desafios anteriores. A diferença é que ela moverá **todos** os itens do grid para o alinhamento especificado.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use this property to center all our items horizontally.
|
||||
Use esta propriedade para centralizar horizontalmente todos itens.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `justify-items` property that has the value of `center`.
|
||||
O elemento de classe `container` deve ter a propriedade `justify-items` com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -50,7 +50,7 @@ assert(
|
||||
grid-gap: 10px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: Align All Items Vertically using align-items
|
||||
title: Alinhar todos os itens verticalmente usando align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
|
||||
forumTopicId: 301121
|
||||
@@ -9,15 +9,15 @@ dashedName: align-all-items-vertically-using-align-items
|
||||
|
||||
# --description--
|
||||
|
||||
Using the `align-items` property on a grid container will set the vertical alignment for all the items in our grid.
|
||||
Usar a propriedade `align-items` em um grid container vai definir um alinhamento vertical para todos os grid items.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use it now to move all the items to the end of each cell.
|
||||
Use-o agora para mover todos os itens para o final de cada célula.
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` class should have a `align-items` property that has the value of `end`.
|
||||
O elemento de classe `container` deve ter a propriedade `align-items` com o valor de `end`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -48,7 +48,7 @@ assert(
|
||||
grid-gap: 10px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: Align an Item Horizontally using justify-self
|
||||
title: Alinhar um item horizontalmente usando justify-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
|
||||
forumTopicId: 301122
|
||||
@@ -9,21 +9,21 @@ dashedName: align-an-item-horizontally-using-justify-self
|
||||
|
||||
# --description--
|
||||
|
||||
In CSS Grid, the content of each item is located in a box which is referred to as a <dfn>cell</dfn>. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of `stretch`, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:
|
||||
No CSS Grid, o conteúdo de cada item está localizado em uma caixa que chamamos de <dfn>célula</dfn>. Você pode alinhar a posição do conteúdo dentro da célula horizontalmente usando a propriedade `justify-self` em um grid item. Por padrão, esta propriedade possui um valor de `stretch`, que fará com que o conteúdo preencha toda a largura da célula. Esta propriedade do CSS Grid também aceita outros valores:
|
||||
|
||||
`start`: aligns the content at the left of the cell,
|
||||
`start`: alinha o conteúdo à esquerda da célula,
|
||||
|
||||
`center`: aligns the content in the center of the cell,
|
||||
`center`: alinha o conteúdo no centro da célula,
|
||||
|
||||
`end`: aligns the content at the right of the cell.
|
||||
`end`: alinha o conteúdo à direita da célula.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use the `justify-self` property to center the item with the class `item2`.
|
||||
Use a propriedade `justify-self` para centralizar o item que possui a classe `item2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item2` class should have a `justify-self` property that has the value of `center`.
|
||||
O elemento de classe `item2` deve ter a propriedade `justify-self` com o valor de `center`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -43,7 +43,7 @@ assert(
|
||||
background: LightSalmon;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: Align an Item Vertically using align-self
|
||||
title: Alinhar um item verticalmente usando align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
|
||||
forumTopicId: 301123
|
||||
@@ -9,15 +9,15 @@ dashedName: align-an-item-vertically-using-align-self
|
||||
|
||||
# --description--
|
||||
|
||||
Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the `align-self` property on an item. This property accepts all of the same values as `justify-self` from the last challenge.
|
||||
Assim como você pode alinhar um item horizontalmente, também existe uma maneira de alinhar um item verticalmente. Para fazer isso, você deve usar a propriedade `align-self` em um grid item. Esta propriedade aceita todos os mesmos valores que `justify-self` do último desafio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Align the item with the class `item3` vertically at the `end`.
|
||||
Alinhe verticalmente o item com a classe `item3` ao final (`end`) da célula.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item3` class should have a `align-self` property that has the value of `end`.
|
||||
O elemento de classe `item3` deve ter a propriedade `align-self` com o valor de `end`.
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
@@ -36,7 +36,7 @@ assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
background: PaleTurquoise;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: Use grid-row to Control Spacing
|
||||
title: Usar grid-row para controlar a posição das linhas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
|
||||
forumTopicId: 301137
|
||||
@@ -9,15 +9,15 @@ dashedName: use-grid-row-to-control-spacing
|
||||
|
||||
# --description--
|
||||
|
||||
Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the `grid-row` property on a grid item.
|
||||
Obviamente, você pode fazer com que os itens ocupem várias linhas, assim como fez com as colunas. Basta definir as divisões horizontais nas quais deseja que um item comece e pare usando a propriedade `grid-row` em um grid item.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Make the element with the `item5` class consume the last two rows.
|
||||
Faça com que o elemento de classe `item5` ocupe as duas últimas linhas.
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` class should have a `grid-row` property.
|
||||
O elemento de classe `item5` deve ter a propriedade `grid-row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -25,7 +25,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`item5` class should have a `grid-row` property which results in it consuming the last two rows of the grid.
|
||||
A classe `item5` deve ter a propriedade `grid-row` definida para que o elemento ocupe as duas últimas linhas do grid.
|
||||
|
||||
```js
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
|
||||
Reference in New Issue
Block a user