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!