Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi, Claudia, como vai?
No Grid, as colunas e linhas são definidas por linhas de grade (grid lines). Essas linhas são numeradas a partir de 1, começando da borda esquerda para a direita (para colunas) e de cima para baixo (para linhas).
Por exemplo,
.banner img:nth-child(1) {
grid-column: 1/3;
}
Neste código, grid-column: 1/3; significa que o primeiro elemento filho do banner (que é uma imagem) vai ocupar o espaço entre a linha 1 e a linha 3 das colunas. Se você contar as linhas de grade, verá que a linha 1 está no início da primeira coluna, a linha 2 está entre a primeira e a segunda coluna, e a linha 3 está no final da segunda coluna. Portanto, essa imagem ocupa duas colunas.
Outro exemplo:
.banner img:nth-child(4) {
grid-column: 2/3;
grid-row: 2/4;
}
Neste caso, grid-column: 2/3; significa que a imagem vai ocupar o espaço entre a linha 2 e a linha 3 das colunas, ou seja, apenas a segunda coluna. Já grid-row: 2/4; significa que a imagem vai ocupar o espaço entre a linha 2 e a linha 4 das linhas, ou seja, duas linhas.
Para visualizar melhor, imagine que você tem uma grade com 2 colunas e 3 linhas. As linhas de grade seriam assim:
Colunas: | 1 | 2 | 3 |
Linhas: | 1 | 2 | 3 | 4 |
Então, se você quiser que um elemento ocupe a primeira e a segunda colunas, você usaria grid-column: 1/3;. Se quiser que ele ocupe da segunda linha até a quarta linha, usaria grid-row: 2/4;.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!