Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Uso de Grid para resolver a "gambiarra" do Flexbox

Olá!

Nesta atividade 06 da aula 03, o instrutor utilizou o grid para resolver o que ele chamou de "gambiarra" ao se utilizar o Flexbox.

A gambiarra no caso seria criar uma div com display: flex para englobar 2 elementos que deveriam ficar lado a lado na visualização, de modo que o restante dos elementos irmãos continuassem com o alinhamento padrão (um em cada linha).

A solução para evitar essa gambiarra foi fazer o container que contém todos os elementos se tornar um grid com 2 colunas, e colocar a propriedade grid-column: span 2 nos elementos que deveriam ficar sozinhos na linha.

Não consegui entender a vantagem do Grid neste caso. Foi necessário repetir a propriedade grid-column: span 2 em vários elementos para resolver esse problema. Na minha cabeça, foi essa solução que ficou parecendo gambiarra, e não o uso de uma div a mais com Flexbox.

Minhas dúvidas: O correto é como foi feito pelo instrutor, utilizando o Grid para este caso? Ou foi somente um exemplo para introduzir o Grid? As vantagens e o uso do Grid serão explicados com mais detalhes em aulas futuras? Pra mim, que está conhecendo o Grid só agora, ele parece muito com o uso antigo de tabelas para definir o layout da página (e isso me dá arrepios!).

Obrigado.

1 resposta
solução!

Oi Matheus, tudo bem?

Desculpe a demora em retornar.

O exemplo foi para introduzir o Grid mesmo. Creio que você já tenha terminado o curso e visto sobre isso.

Recentemente saiu uma nova Formação de estilos, e nela, tem um curso novinho sobre Flexbox e Grid. Que acredito que você possa gostar.

Um abraço e bons estudos.