Dimensões do Grid

Oi Luiza,

A grid-template é usada para definir a estrutura da grade de um elemento. Com ela você especifica o número de linhas e colunas da grade, bem como o tamanho das linhas e colunas e a posição das células da grade.

Por exemplo, a seguinte declaração de estilo usa a propriedade grid-template para criar uma grade com duas linhas e três colunas, onde a primeira linha tem 50 pixels de altura e as outras linhas são automáticas, e a primeira coluna tem 100 pixels de largura e as outras colunas são igualmente divididas:

grid-template:
  "header header header" 50px
  "sidebar content ads" auto / 100px 1fr 1fr;

Se quiser outros exemplos, recomendo dar uma olhada na documentação da grid-template no MDN.

Abcs e bons estudos!

Obrigada Natan!

Mas os instrutores não usaram essa propriedade no curso. Então não sei de que forma foram determinadas as dimensões das colunas e das linhas.

Como foi feito:

        <section class="banner">
            <img src="./assets/img/banner1.png" alt="Banner cor amarela">
            <img src="./assets/img/banner2.png" alt="Banner cor lilás">
            <img src="./assets/img/banner3.png" alt="Banner cor verde">
            <img src="./assets/img/banner4.png" alt="Banner cor laranja">
        </section>

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner {
    display: grid;
    gap: 1rem;
}

.banner img:nth-child(1) {
    grid-column: 1/3;
}

.banner img:nth-child(4) {
    grid-column: 2/3;
    grid-row: 2/4;
}