0

I´m working on a Bootstrap/Flex project. In this project, there´s a part that is a list of items.

I would like to put equal space between the items columns, even when the last row of items is incomplete. Just like the example picture below:

https://i.stack.imgur.com/E4aC9.png

It´s almost what flex-wrap does, with the addition of the justify-content-between property. Kind of a merge between the two properties.

But when I try to do just a merge of the two properties above, I end up with something like this:

https://i.stack.imgur.com/YFHAO.png

What do you guys suggest?

Thank you in advance!

P.S.: of course, it needs to be responsive. It means that in mobile, for example, each row will have only 2-3 items. In desktop, however, each row can have 7-11 items.

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Pedro Rabbi
  • 193
  • 1
  • 12
  • Have you considered using rows and 4 .col-3 columns? – Erica T. Aug 07 '20 at 17:55
  • Yes, but it doesn´t work because of the following: the items need to have a minimun width | the layout needs to be responsive. It means that in mobile, for example, each row will have only two items. In desktop, however, each row can have 7-11 items. – Pedro Rabbi Aug 07 '20 at 17:59

1 Answers1

1

First, my English is very low. but I'll explain a demo who hope you know. You could use below:

<div class="demo d-grid justify-content-between align-items-center gap-2 flex-wrap" style="grid-template-columns: repeat(auto-fill,130px);">
<img src="xxx.jpg" />
<img src="xxx.jpg" />
<img src="xxx.jpg" />
<img src="xxx.jpg" />
<img src="xxx.jpg" />
</div>

There is picture 'width' equal '130px',so repeat(auto-fill,130px).

by s
  • 11
  • 2