Oi pessoal! Na seção destaques, nós conseguimos colocar uma margem entre a grid utilizando o grid-gap. Por que aqui não consigo usar o mesmo recurso?
.populares__card {
background: #fdfdfd;
display: grid;
grid-template-areas:
'card-imagem'
'card-corpo';
grid-template-columns: 100%;
grid-template-rows: 1.5fr 2fr;
/* margin-right: 1rem; */
width: calc(20% - 1rem);
}
Oi, Henrique, tudo bem?
O grid-gap foi mudado de nomeclatura e agora é somente gap. Para saber mais:https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Tudo bem. Mas neste caso, como mostra no código, o professor utilizou margin-right para dar o espaço entre cards. Eu gostaria de entender por quê não podemos usar o gap
Oi, Henrique!
Na verdade, o gap foi defenido na classe destaques, que é onde foi definidas o grid-template-columns e o grid-template-rows, com a deifnição podemos dar o gap entre as colunas que foram divididas para terem 25% de largura e com 0.2rem de gap. Nessa classe você poderá manipular a largura do gap entre as imagens.