1

I am trying to make a list of items in a flex container, but I do not know how many of them will show up. The items are stretching to fill the container and their widths start on flex-basis: 125px. On my web, the container can be resized by a user which might cause troubles. The problem is, that by the end, there are sometimes fewer items than on any other row. That means that the items in the last row stretch differently and "do not follow the grid". How can I make them follow the grid?

Here is a link to JSFiddle, where you can see a demo of my problem. If you resize the output window, you'll see, why the code does not cooperate with me. I have already tried to add .container::after that would somehow fill the space to make the last row to follow the grid, but it just doesn't allow the last items to overgrow "too much".

The basic CSS is this:

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

.item{
  flex-basis: 125px;
  flex-grow: 1;
}

I would like to have it the way, that if the user resizes the window, it would go like this:

Link to an image

But in my case, it goes like this:

Link to an image

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
David Sojka
  • 73
  • 1
  • 9
  • if you want i can create with grid. – doğukan Jan 11 '19 at 18:57
  • don't edit the question to add the answer (the question should remain a question). By the way that answer is already in the duplicate question. – Temani Afif Jan 12 '19 at 10:17
  • @TemaniAfif I don’t see that answer in the duplicate question. I would not edit the question if I could add an answer. – David Sojka Jan 12 '19 at 10:19
  • because you didn't read the answer unfortunately ... from the duplicate :"Although this behavior is difficult to achieve in flexbox, it's simple and easy in CSS Grid Layout:" --> then there is a link to this question: https://stackoverflow.com/questions/44154580/equal-width-flex-items-even-after-they-wrap and in this question there is the answer. You need to take the time to read the duplicate and consider all the options/links, etc – Temani Afif Jan 12 '19 at 10:21
  • @TemaniAfif Oh I didn’t go so deep for the answer. Sorry for that, I’ve been looking for a solution for days... – David Sojka Jan 12 '19 at 10:23
  • you should do then, closing as duplicate is not to simply *close* the question, it's to give you the answer you need. No need to search for days. I gave you the canonical duplicate where you will find all the ways for what you want, no need more than this question – Temani Afif Jan 12 '19 at 10:26

0 Answers0