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.

2
  • Have you considered using rows and 4 .col-3 columns?
    – Erica T.
    Aug 7, 2020 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. Aug 7, 2020 at 17:59

1 Answer 1

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.