Solucionado
Boa noite, utilizei do que foi lecionado nas aulas sem problema algum, acrescentando um gap de 3%
.grid-container{
display:grid;
grid-template-columns: auto 1fr 1fr;
grid-gap: 3%;
}
Entretanto os botões não ficaram com diferentes tamanhos conforme imagem. É necessário isso, pois se sim, gostaria de um auxilio de como fazer. cheguei a ler sobre o uso do
grid-template-row: auto 1fr auto minmax(40px, 60px);
porem não obtive o efeito esperado.
Oi, Juliano, tudo bem?
Para resolver essa atividade, precisamos inicialmente definir o display como grid e delimitar a quantidade de colunas que queremos utilizar por meio do comando grid-template-columns e podemos realizar um espaçamento entre as linhas e colunas para gerar um efeito mais próximo ao resultado que desejamos obter por meio do gap. Todos os elementos mencionados são adicionados no elemento container, que engloba todos os itens, como mostra o código abaixo.
.grid-container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3%;
}Em seguida precisamos posicionar os elementos dentro do grid que estabelecemos e podemos fazer isso por meio do grid-template-areas, que cria um layout de como os elementos vão ser dispostos dentro do grid. Esse comando também deve ser aplicado no elemento container:
.grid-container{
display:grid;
grid-template-columns: repeat(3 1fr);
gap:3%;
grid-template-areas:
"item1 item2 item3"
"item4 item4 item3"
"item5 item5 item6";Para especificar as áreas de cada item precisamos criar seletores de classe com os nomes "item1" até "item6" para cada elemento.
<div class="grid-container">
<div class="grid-item item1">Funk</div>
<div class="grid-item item2">Pop</div>
<div class="grid-item item3">Hip Hop</div>
<div class="grid-item item4">Rock Alternativo</div>
<div class="grid-item item5">Reggaeton</div>
<div class="grid-item item6">Rap</div>
</div>Por fim, utilizando os seletores criados, devemos indicar a área que cada elemento vai ocupar, usando a propriedade grid-area e informando o nome referente a posição estabelecida no layout criado com o grid-template-areas.
.item1{
grid-area:item1;
}
.item2{
grid-area:item2;
}
.item3 {
background: #84EEC1;
color: #041833;
grid-area:item3;
}
.item4{
grid-area:item4;
}
.item5{
grid-area:item5;
}
.item6{
grid-area:item6;
}Dessa forma, obteremos o resultado esperado na atividade.
O uso do minmaxque você menciona ao utilizar o grid-template-row: auto 1fr auto minmax(40px, 60px) é uma notação funcional que define uma faixa de tamanho maior ou igual a "min" e menor ou igual a "max". Neste caso ele não seria ideal para resolver o exercício, pois ele não promove o posicionamento dos elementos dentro do grid.
Espero ter ajudado e caso tenha dúvidas, estarei à disposição. Abraços e bons estudos!
Obrigado pela ajuda.