Grid of images: 5 by 5 on desktop but 3 by 9 on mobile devices

Question

I need to make a grid of images of 5 by 5, on 3/4 of the screen on a desktop, but 3 by 9 (last row has only 1 image) when is a mobile device.

All images will be 120x175 always.

Desired desktop:

Desired mobile:

I currently have a grid of 4 by 4, because Bootstrap works with col divisible by 3 or 4.

But the problem is the grid doesn't accomodate on mobile devices.

Current desktop:

Current mobile:

Code:

 <div class="row"> <div class="col-md-1"></div> <div class="col-md-7"> <div class="row"> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> </div> <div class="row"> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> <div class="col-md-3 mb-3"> <img src="https://picsum.photos/100/200"> </div> </div> </div> <div class="col-md-4"> </div> </div>

Answer 1

Remember : Mobile first. Meaning that your columns will always start to 12 grids until told otherwise. So if you only define md, then it will get the md configuration from tablet and bigger screens.

Now for your problem, you could use the offsets:

<div class="col-sm-4 col-md-2 col-md-offset-1"></div>
<div class="col-sm-4 col-md-2"></div>
<div class="col-sm-4 col-md-2"></div>
<div class="col-sm-4 col-md-2"></div>
<div class="col-sm-4 col-md-2"></div>

Another way to do it, is to just not define any number and let it automatically fill the width:

<div class="row">
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
    <div class="col-sm-4 col-md"></div>
  </div>

It seems that you have more than 5 items meaning that you will have to iterate through them all and create a row with 5 children on each row. This might help you to achieve that:

Loop through an array and divide it