2
respostas

Problemas com o alinhamento do grid

Bom dia.

Estou encontrando dificuldade em alinhar o Grid. Os cards parecem sempre desalinhados.

Além disso, em alguns casos, os cards parecem se tocar, inclusive....

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Este é o meu CSS:

.cabecalhoPrincipal .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav {
    display: flex;
} 

/* Conteúdo --------------------*/

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link{
    width: 23%;
    margin: 1%;
}

.conteudoPrincipal-cursos-link:nth-child(4n) {
    margin-right: 0;
}

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
    margin-left: 0;
}

/*Rodapé -----------------------*/

.rodapePrincipal-patrocinadores .container {
    display: flex;
}

.rodapePrincipal-patrocinadores-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 70%;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm {
    width: 25%;
}

.rodapePrincipal-contatoForm-fieldset {
    display: flex;
}

.rodapePrincipal-navMap-list{
    display: flex;
    /* flex-direction: column;
    flex-wrap: wrap; */
    flex-flow: column wrap;
    height: 260px;
}
2 respostas

Esta imagem ilustra o desalinhamento dos cards que está acontecendo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Olá, Igor. Como vai?

Atualmente tem uma propriedade nova do flexbox que aplica espaçamento entre itens, é a gap. Você pode substituir pelo margin, e também tirar os margin 0 no nth-child logo abaixo. Pra mim resolveu, confere se resolveu pra você também por favor?

.conteudoPrincipal-cursos-link {
    width: 23%;
    gap: 1%;
}

Espero ter ajudado.

Bons estudos!