Entrar Ainda não tem acesso?
1
resposta

Grid torto

Referente ao curso Flexbox: posicione elementos na tela, no capítulo Grid principal e limitações do flexbox e atividade Terminando course grid

por Bruno Vinícius Dutra Silva
| 61.1k xp | 25 posts
Professor

Tive o mesmo problema de algumas pessoas e quando seguia as instruções ao pé da linha, o grid ficava torto. Mais especificamente entre as caixinhas de ícones "Javascript" e "Angular JS"

Eu tirei o "margin: 1%;" do código e o grid ficou alinhado como no vídeo. Ficou assim

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

O que aconteceu exatamente? Houve conflito entre o que estava escrito no meu flexbox.css com o que estava escrito no style.css disponibilizado no projeto? Detalhe, não modifiquei nada no style.css e segui todas as instruções corretamente ao editar o flexbox.css

1 resposta
por Luan Alves
| 427.6k xp | 555 posts
Monitor em Desenvolvimento Front-End

Oi, Bruno!

O motivo específico deles ficarem desalinhados eu infelizmente não sei te afirmar. Porém, existe uma solução nova do Flexbox, que não estava disponibilizada quando o instrutor lançou esse curso, que no caso é a mais ideal utilizando Flexbox.

É a propriedade gap, que aplica espaçamento apenas entre os itens, e não ao redor deles. 

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

E aí não precisa utilizar os nth-child com margin 0. Pode apagar essa parte.

No meu navegador que é o Chrome resolveu essa distorção.

Espero ter ajudado de alguma forma!

Bons estudos! :)