Ajuda Eu Pow! Apanhando no CSS
comentada em 04/10/2023 17:58

@sardanha

grid do css talvez ajude

CSS Grid Layout

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. 

compartilhe o codigo no codepen.io, assim quem puder pode te ajudar melhor.

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

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.

Não sei react, mas pra coisas assim eu utilizaria Bootstrap.