Grid torto | Flexbox: posicione elementos na tela | Alura

1
resposta

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

11/08/2022

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! :)