Fala galera,
Os grids 1, 5, 9, 13 e 17 do "Nossos Cursos" aparecem desalinhados para mim na versão mobile. Pelo padrão, acredito que o bug esteja relacionado aos códigos que utilizam nth-child(4n) e nth-child(4n+1). No entanto, não consigo solucionar o problema.
Algo semelhante aconteceu ao configurar o formato para desktop neste tópico.
Alguma ideia?
Deixo abaixo um print onde aparecem os grids 1 e 5 desalinhados, para exemplificar o erro:
Obrigado!
hoje, com a Alura e o Google Gemini
Olá Pablo, tudo bem?
Desculpe a demora em retornar.
Obrigada por compartilhar sua dúvida conosco. Realmente, a utilização do nth-child pode gerar problemas de alinhamento em diferentes tamanhos de tela. Uma solução para isso é utilizar o Flexbox para posicionar os elementos na tela.
Uma sugestão seria criar um container para os grids e utilizar a propriedade flex-wrap: wrap para que os elementos sejam organizados em linhas. Em seguida, você pode utilizar a propriedade flex-basis para definir a largura dos elementos e a propriedade margin para ajustar o espaçamento entre eles.
Segue um exemplo de código que pode ajudar:
.container {
display: flex;
flex-wrap: wrap;
}
.grid {
flex-basis: 25%;
margin: 10px;
}Lembrando que você pode ajustar os valores de largura e espaçamento de acordo com sua necessidade.