css- How to align CSS grid images in a mobile layout?

Question

I have a CSS grid created with images on a desktop layout that looks like below:

When I set it to a mobile layout using developer tools in chrome, it gives me this:

The images become blurry and that is probably due to the resolution of the image originally. I was wondering do I need to compress my image and replace it on a media query or I could just put one image per row on mobile layout?

This is my code:

 <!--CSS Grid to display home page images -->
<div class="wrapper">

    <div class=" bed">
      <img src="{{asset('/images/Home_Bed.jpg')}}" alt=""> 
      <a href="#">New Product <span class="">➡</span></a>
    </div>
    <div class="pillow"><img src="{{asset('/images/Home_Pillow.jpg')}}" alt="">
      <a href="#">Best Seller <span class="">➡</span></a></div>
    <div class=" kitchen"><img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="">
      <a href="#">Offer <span class="">➡</span></a>
    </div>
    <div class=" living-room"><img src="{{asset('/images/Shop_Page.jpg')}}" alt="">
      <a href="#">DC Home Design <span class="">➡</span></a>
    </div>
    <div class=" sofa"><img src="{{asset('/images/Home_Sofa.jpg')}}" alt="">
      <a href="#">Top Rated <span class="">➡</span></a>
    </div>




</div>

@endsection

@push('style')
<style>

@media (max-width: 767px) {

.bed {
  grid-column: 1/3;
  grid-row: 1 / 3;
  height: 20px;
}
.pillow {
  grid-column: 3;
  grid-row: 1 / 3;
}



.kitchen {
  grid-column: 3;
  grid-row: 3 / 5;
}



.living-room {
  grid-column: 2 / 3;
  grid-row: 3 / 1;
}



.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}

}



.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-template-rows: repeat(8, 1fr);
  padding: 5em;
  grid-gap: 2.5em;
  background-color: black;

  height: 900px;
  max-width: 100%;
}

.wrapper>div {
  position: relative;
}

.wrapper>div>a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  text-decoration: none;
}

.wrapper>div::after {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: black;
  color: white;
  padding: .5rem;
}

.bed {
  grid-column: 1/2;
  grid-row: 1/3;
  height: 110%;
  width:100%;
}


.pillow {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 110%;
  width:90%;
}



.kitchen {
  grid-column: 3;
  grid-row: 2 / 5;
}



.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / -1;
}



.sofa {
  grid-column-start: 3;
  grid-row: 5 / -1;
}



img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}


body{
    background-color: black;
    }





    .heading-part {
        border-bottom: 3px solid #e5e5e5;
        display: inline-block;
        width: 100%;
    }

    .main-title {
        margin-bottom: 0;
        font-size: 1.5rem;
        float: left;
        text-transform: uppercase;
    }

    .main-title::after {
        border-bottom: 3px solid #552244;
        content: "";
        display: block;
        margin-bottom: -3px;
        padding: 2px;
    }
</style>

I am not too sure how to fix this alignment problem. I tried changing the grid row and column on my media query but it does not reflect any change. Any help on this matter is appreciated.

score 0 · Answer 1 · answered Mar 15 '20 at 09:17

You can try grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); for your responsive code.

body {
  background-color: black;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 2em;
  grid-gap: 2em;
  background-color: black;
  height: 900px;
  max-width: 100%;
}

.wrapper > div {
  position: relative;
}

.wrapper > div > a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  text-decoration: none;
}

.bed {
  grid-column: span 2;
  grid-row: span 1;
}

.pillow {
  grid-column: span 2;
  grid-row: span 1;
}

.kitchen {
  grid-column: span 4;
  grid-row: span 3;
}

.living-room {
  grid-column: span 2;
  grid-row: span 1;
}

.sofa {
  grid-column: span 2;
  grid-row: span 2;
}



@media screen and (max-width: 767px) {
  .wrapper {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  .bed,
  .pillow,
  .kitchen,
  .living-room,
  .sofa {
   grid-column: span 1;
  grid-row: span 1;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <div class=" bed">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">New Product <span class="">➡</span></a>
      </div>
      <div class="pillow">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">Best Seller <span class="">➡</span></a>
      </div>
      <div class=" kitchen">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">Offer <span class="">➡</span></a>
      </div>
      <div class=" living-room">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">DC Home Design <span class="">➡</span></a>
      </div>
      <div class=" sofa">
        <img
          src="https://europeansting.files.wordpress.com/2019/11/nature.jpeg"
          alt=""
        />
        <a href="#">Top Rated <span class="">➡</span></a>
      </div>
    </div>
  </body>
</html>

score 0 · Answer 2 · answered Mar 15 '20 at 09:20

Your image seems blurry because its aspect ratio is not maintained. One way to maintain its aspect ratio while specifying the height and width of the image is by using object-fit: cover. Note that by specifying its height and width explicitly while using object-fit: cover, the image will be cut off if needed and will be centered. A nice link that shows a simple demonstration of object-fit is available here.

Even with using object-fit: cover to maintain the image's aspect ratio, when the viewport's width is too small, the cut-off portion of the image may be too much that the image no longer conveys useful information. Because of this, we'll have to adjust the positioning of the images. Because you have an irregular pattern of grid item placement, I suggest you to only display one image at one row on smaller screen sizes. You can do this by changing the display property of your wrapper to flex like below.

However, if you have a regular pattern of grid item placement (e.g. 3 items per grid row and the nth item always span 2 columns), you can try reading this useful link from CSS Tricks to avoid using media-query altogether.

Here's a simple example that sets the display to flex, thus only showing one item per row when the screen sizes is smaller or equal to 800px. Notice how object-fit: cover forces the image to fill its size but still maintaining its aspect ratio (you can, of course, tweak this setting as you like).

* {
  box-sizing: border-box;
}

body {
  padding: 0px 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  grid-auto-rows: 100px;
  column-gap: 10px;
  row-gap: 10px;
}

.wrapper>div {
  border: 1px solid #121212;
  border-radius: 5px;
}

.wrapper>div img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.bed {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.pillow {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.kitchen {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.living-room {
  grid-column: 1 / 3;
  grid-row: 3 / 6;
}

.sofa {
  grid-column: 3 / 4;
  grid-row: 4 / 6;
}

@media (max-width: 800px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .wrapper>div {
    padding: 0px 20px;
    margin: 10px 0px;
  }
  .wrapper>div img {
    max-width: 100%;
    max-height: 80vh;
  }
}

<div class="wrapper">
  <div class="bed">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="pillow">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="kitchen">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="living-room">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
  <div class="sofa">
    <img src="https://image.shutterstock.com/image-vector/default-ui-image-placeholder-wireframes-260nw-1037719192.jpg" alt="">
  </div>
</div>

I solved it but i manually adjust the grid rows and column in my media column so now it fits one row per picture. — Lord Jesus, Mar 15 '20 at 09:23
@LordJesus Using display: flex would be easier if you want to make it one-dimensional like that. It seems like my answer helped you. Have you considered accepting my answer ;-)? — Richard, Mar 28 '20 at 13:40

css- How to align CSS grid images in a mobile layout?

2 Answers2