CODEWITHSUNDEEP
htmlcss
Omar Gonzales
Omar Gonzales

Reputation: 4008

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

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:

enter image description here

Desired mobile:

enter image description here

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:

enter image description here

Current mobile:

enter image description here

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>

Upvotes: 0

Views: 91

Answers (1)

Aristeidis Karavas
Aristeidis Karavas

Reputation: 1956

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

Upvotes: 1

Related Questions