2
respostas

Um space-between em populares__conteudo, e uma sensação um tanto confusa vinda da aula 3 / 3

Tive que acrescentar ao populares__conteudo um space-between. Me incomodou o fato de não estarem alinhadas na vertical, como no protótipo, as imagens das seções populares e destaques. Deixei assim:

.populares__conteudo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;    
    grid-area: conteudo;  
    padding: 1rem 0;
}

Outro comentário: Lá na aula 03 // 03, onde ajustamos a seção populares, eu segui as orientações todas, e onde o resultado do professor estava 'dando errado' ou escondendo as imagens, o meu já estava ok. Confesso que fiquei confuso, mas como o meu estava dando certo, toquei adiante.

Acho interessante estas pausas no caminho, para explicar algumas razões e editar depois.

Mas achei que a sequência de edições no CSS não seguiu uma lógica tão sequencial (ou uma cascata ?) que ajudasse a entender onde exatamente eu estava mexendo. Acredito que em CSS é importante a gente ir 'de fora para dentro' sempre que possível, ainda mais mesclando flex e grid.

Tenho por hábito registrar roteiro em Markdown. E quando anotei tudo o que havia feito, "repeti para mim mesmo" os passos em outra sequência, que a meu ver acompanhava mais a 'cascata' do CSS. Quero dizer que: o vai e vem na edição das classes, nesta aula em particular, tornou confusa a compreensão. Mas como eu sou de deixar migalhas de pão no caminho, me encontrei e 'costurei' as ideias. Mas fica o registro aí.

EDIT: Acrescentei mais um margin-right: .5rem na classe destaques, na aba de mesmo nome. E ficou tudo alinhado.

2 respostas

Vc está usando grid-area com display flex, teria que usar com grid

No próprio conteúdo do curso já estamos combinando ambos... Acho que um não exclui o outro, são bem complementares, aliás, dado que algumas soluções são mais práticas usando grid, outras usando flex. Eu impliquei que o conteúdo de populares não ficou EXATAMENTE alinhado aos destaques em cima, fica um pequeno recuo, e no layout do protótipo, estava tudo alinhado até uma mesma margem. Se observar, vai notar que não fica bem alinhado - nem o do professor na aula ficou - eu baixei o projeto pronto pra abrir no navegador e conferir.

Mas tenho que contar que paguei o preço pela minha edição.

Nessa resolução de tela, com 3 colunas de cards, como usei space-between, criei um espaço entre os cards que sobraram "de duplinha", ficando cada um em um canto.

Solucionei, usando no min-width: 992px um justify-content: flex-start; na mesma class populares__conteudo, e usando um margin-left: 1rem na class populares__card.

Boa sorte ae! E foco nos detalhes :D