Entrar Ainda não tem acesso?
1
resposta

Uma solução para centralizar os cards que parecem estar com um espaço maior na direita

Referente ao curso CSS Grid: simplificando layouts, no capítulo Estilizando a seção de populares e atividade Finalizando o populares

por Diego Alves
| 111.4k xp | 30 posts

Olá, pessoas

Como alguns perceberam e relataram, os cards da seção "populares" ficam com um espaçamento maior do lado direito comparado com o lado esquerdo. Acho que isso aconteceu porque colocamos uma margin-right de 1rem para separar os cards um do outro.

.populares__card{
    background: #fdfdfd;

    display: grid;
    grid-template-areas: "card-imagem" "card-corpo";
    grid-template-columns: 100%;
    grid-template-rows: 173px auto;
    /* object-fit: cover; */

    ***margin-right: 1rem;***
    width: calc(20% - 1rem);
}

Achei uma solução simples que funcionou bem pra mim. Basta dividir essa margem para os dois lados, ou seja, ao invés de definir margin-right: 1rem, definimos margin-right: 0.5rem e margin-left: 0.5rem. Assim, os espaçamentos na lateral da página ficam iguais.

O código ficou assim:

.populares__card{
    background: #fdfdfd;

    display: grid;
    grid-template-areas: "card-imagem" "card-corpo";
    grid-template-columns: 100%;
    grid-template-rows: 173px auto;
    /* object-fit: cover; */

    ***margin-right: .5rem;***
    ***margin-left: .5rem;***
    width: calc(20% - 1rem);
}

Espero ter ajudado alguém :)

1 resposta
por Anthoni
| 314.8k xp | 164 posts

Na minha resolução optei por usar grid-template-column ao invés de width com isso conseguir utilizar gap para separar igualmente os espaços;

@media screen and (min-width: 768px) {
    .destaques__principal {
        grid-column: 1 / 4;
    }

    .destaques__secundario {
        display: flex;
    }

    .destaques__categorias {
        grid-column: 1 / 3;
    }

    .populares__conteudo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .populares__card {
        grid-template-rows: 173px auto;
    }    
}

@media screen and (min-width: 992px) {
    .populares__conteudo {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 1200px) {
    .populares__conteudo {
        grid-template-columns: repeat(5, 1fr);
    }
}