How to remove Whitespaces seen between containers of various sizes while using CSS flexbox

Question

I am looking to load the images below one another without any gaps in between: something like this:

But currently this is what is happening:

As seen, a space is getting added between images if the images are of not the same size. I think since I'm using Flexbox this is causing this issue. below is my code:

Js:

const list = [{title: "abd",id: 123}, {title: "gferger",id: 7676}, {title: "htytyjtyujt",id: 65575}];
{list.map((obj) => {
<div class="image-container">
               <img class="img-section"/>
               <div class="image-title">{obj.title}</div>
             </div>
             });

css:

.img-section {
  width: 200px;
  height: 300px;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

however I'm not sure if there is any other way to display all images next to each other and also ensure no white spaces are seen when there is an uneven image size. Any ideas ???

Can you share your code on [codeSandBox](https://codesandbox.io/) or on a similar website? As the first sight, `
` should not be outside of your map iteration? A flex container is generated for every single image this way. — Botond Balogh, Aug 04 '22 at 05:36
Can try designing column wise instead of row-wise. `flex-direction: column` can also be of some use. — Anshuman, Aug 04 '22 at 05:53

Mohammad Taheri · Answer 1 · 2022-08-04T05:31:30.920

-1

you are using space-evenly

consider using this:

first: change to this and see the result:

 .image-container {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     gap: 12px;
  }

then you can change justify-content to flex-start or center and see the result;

I think you need justify-content: flex-start;

let me know if it helps you.

Also, if you want to see more datils about this topic, check this two project on my GitHub:

Justify Content

Align Items

edited Aug 04 '22 at 05:31

answered Aug 04 '22 at 05:26

Mohammad Taheri

348
2
9

This is not what OP is asking – Airy Aug 04 '22 at 05:43

Airy · Accepted Answer · 2022-08-04T05:45:31.340

-1

May be your question is CSS-only masonry layout

Would be really happy to see specially if there are more than 2 Columns of Images like Pinterest. But I don't think it's possible with CSS Flexbox only.

However, if you cannot find any pure CSS solution, checko masonry Javascript Library

CSS Grid Layout can be pure CSS Solution but it's still in very early stages

edited Aug 04 '22 at 05:45

answered Aug 04 '22 at 05:37

Airy

5,484
7
53
78

I'm agree whit using masonry. But, why we can not have this? columns have separate flex space, so they can be designed as a separate space. – Mohammad Taheri Aug 04 '22 at 05:45
@MohammadTaheri FlexBox still not able to support such Masonry style positioning of children. Grid Layout can be pure CSS solution but it's still in it's early stages – Airy Aug 04 '22 at 05:49

How to remove Whitespaces seen between containers of various sizes while using CSS flexbox

2 Answers2