title: css- How to align CSS grid images in a mobile layout?
body: <p>I have a CSS grid created with images on a desktop layout that looks like below:</p>
  
  <p><a href="https://i.stack.imgur.com/wrLFe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wrLFe.png" alt="enter image description here"></a></p>
  
  <p>When I set it to a mobile layout using developer tools in chrome, it gives me this:</p>
  
  <p><a href="https://i.stack.imgur.com/whAW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/whAW8.png" alt="enter image description here"></a></p>
  
  <p>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 <code>per row</code> on mobile layout?</p>
  
  <p>This is my code:</p>
  
  <pre><code> &lt;!--CSS Grid to display home page images --&gt;
  &lt;div class="wrapper"&gt;
  
      &lt;div class=" bed"&gt;
        &lt;img src="{{asset('/images/Home_Bed.jpg')}}" alt=""&gt; 
        &lt;a href="#"&gt;New Product &lt;span class=""&gt;➡&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="pillow"&gt;&lt;img src="{{asset('/images/Home_Pillow.jpg')}}" alt=""&gt;
        &lt;a href="#"&gt;Best Seller &lt;span class=""&gt;➡&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;div class=" kitchen"&gt;&lt;img src="{{asset('/images/Home_Kitchen.jpg')}}" alt=""&gt;
        &lt;a href="#"&gt;Offer &lt;span class=""&gt;➡&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=" living-room"&gt;&lt;img src="{{asset('/images/Shop_Page.jpg')}}" alt=""&gt;
        &lt;a href="#"&gt;DC Home Design &lt;span class=""&gt;➡&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=" sofa"&gt;&lt;img src="{{asset('/images/Home_Sofa.jpg')}}" alt=""&gt;
        &lt;a href="#"&gt;Top Rated &lt;span class=""&gt;➡&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;/div&gt;
  
  @endsection
  
  @push('style')
  &lt;style&gt;
  
  @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&gt;div {
    position: relative;
  }
  
  .wrapper&gt;div&gt;a {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    text-decoration: none;
  }
  
  .wrapper&gt;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;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>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.</p>