0

I am about to start a project in React where I am going to receive different sets of images in different sizes and I need to wrap them around to fill the space. Here is the concept design:

enter image description here enter image description here enter image description here

Is there some kind of CSS that can dynamically wrap the images around or am I better off just creating predefined layouts and trying to work it out that way?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Andrew Monis
  • 45
  • 5
  • Try combining `display: flex` and `flex-wrap: wrap`. These might also help: [_"flexbox wrapping with items of varying size"_](https://stackoverflow.com/questions/54892908/flexbox-wrapping-with-items-of-varying-size) and [_"CSS-only masonry layout"_](https://stackoverflow.com/questions/44377343/css-only-masonry-layout). – Mr. Polywhirl Apr 18 '23 at 17:28
  • If you're not making the images yourself, but "receive" them, it's unlikely that they will always be as nice as in your examples. That's why most sites choose to just show thumbnails which an user can zoom into, unless you want to preprocess all the images extensively. – KIKO Software Apr 18 '23 at 17:31
  • You will also have to somehow tag your images so the vertical order makes some sense: From top to bottom: hat, glasses, shirt/jacket, bag, trousers, shoes. Because you, maybe subconsciously, sorted the items that way. – KIKO Software Apr 18 '23 at 17:36

1 Answers1

0

in general this is a quite complex problem that needs to be solved by javascript or with your static template approach.

However, there is a light variant to address this issue, CSS grid with grid-auto-flow: dense, maybe this is sufficient for your use case.

In your case: Imagine every Card is a grid with 6x10 column/row rasterization. You need to classify your images by telling how much rows and columns every image gets, this can be done with this for example:

grid-row: span 2;
grid-column: span 2;

The dense algorithm of CSS grid will auto place your images to fill the available space in the most efficient order. What won't be possible: Giving the single images auto available sizes.

You'll find more infos here:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

max-crcl
  • 61
  • 4