Ajuda Eu Pow! Apanhando no CSS

Tecnologia
messias_da_bolsa   180º
em 04/10/23 11:22
Nível no Race: Fera neném
ver comentários do moderador

Comentários

Último comentário Só moderadores Só os meus Só quem eu sigo Ordenar por gostei
Giovanni 
em 04/10/2023 11:42
Nível no Race: Profissa do Bastter Race
@sardanha

grid do css talvez ajude

CSS Grid Layout
Ajuda Eu Pow! Apanhando no CSS - #1 de 6
FinoFW  180º
em 04/10/2023 11:57
Existem varias maneiras diferentes de resolver esse tipo de coisa, e acho que para recomendar X ou Y, depende de requisitos quanto a exibição das imagens. O bastergram por exemplo apresenta 4 colunas ( imagens) por linha numa tela grande, mas a responsividade diminui isso para um numero menor conforme a tela diminui.

Se você quer que as imagens ocupem um espaço maior do que o definido pelo numero de colunas, talvez não seja uma referência boa para buscar.
Vale apontar também se você quer que a imagem seja apresentada de acordo com o tamanho absoluto dela ou de acordo com o razão entre altura e largura.
Enfim, esse problema pode ser complexo dependendo de como voce quer que essa galeria se comporte, recomendo dar uma boa olhada nos seguintes recursos:
- A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks
- A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks
Uma dica valida se você quer descobrir como algum site funciona é inspecionar o codigo dele (shift+F12). Tem varias dicas ali de como o layout se comporta. 

Ajuda Eu Pow! Apanhando no CSS - #2 de 6
Patolord  180º
em 04/10/2023 13:04
Nível no Race: Tá começando a andar
compartilhe o codigo no codepen.io, assim quem puder pode te ajudar melhor.
Ajuda Eu Pow! Apanhando no CSS - #3 de 6
wendler.dev  180º
em 04/10/2023 13:38
Nível no Race: Tá ficando maluco igual o Bastter
O nome desse efeito que voce quer é Mansory, um tipo de grid que tem width definido e hight automático 

Vou deixar uns links encontrados bem rapidinho, mas como vc ta em react tbm existem libs que normalmente e so passar os elementos e ele arranja. Se for um projeto pessoal, vai de css na unha caso seja uma entrega pra cliente vai na lib e boa

Masonry layout - CSS: Cascading Style Sheets | MDN

CSS Only Masonry Layouts with Grid
Ajuda Eu Pow! Apanhando no CSS - #4 de 6
Ceos  180º
em 04/10/2023 15:04
Nível no Race: Profissa do Bastter Race
Não mexo muito no front, mas coincidentemente ontem até ajeitei algo no meu portfolio. Já tentou a object-fit no css da img? se colocar dentro de um componente pai com propriedade de height e width fixos pode ajudar também. Sempre me enrolo quando mexo com img no front.
Ajuda Eu Pow! Apanhando no CSS - #5 de 6
MeninoGigante 
em 04/10/2023 17:58
Não sei react, mas pra coisas assim eu utilizaria Bootstrap. 
Ajuda Eu Pow! Apanhando no CSS - #6 de 6

Notificar 1º comentário Só moderadores Só os meus Só quem eu sigo Ordenar por gostei

Você está em Tecnologia > Ajuda Eu Pow! Apanhando no CSS
por messias_da_bolsa em 04/10/2023 11:22

6 usuários comentaram este tópico.
Clique para ir para o primeiro comentário do usuário.