Olá! Estou com dúvida em relação as dimensões dos grid items. No CSS Grid: simplificando layouts, o instrutor usou o grid-template para determinar o tamanho de cada coluna e de cada linha. Mas nesse curso não teve essa especificação. Poderiam me explicar mais sobre?
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;
}