0

The preview URL: https://asilklife.myshopify.com/?preview_theme_id=132753031414

enter image description here

The size of the image is 800px x 800px, why the height of the grid's container is always 6px more.

<div class="grid-wrapper">
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
</div>


<style type="text/css">
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: red;
  }
  
  .wrapper-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
</style>
Nick Vu
  • 14,512
  • 4
  • 21
  • 31
user1434702
  • 817
  • 1
  • 14
  • 33

1 Answers1

0

<img> has a default display value of inline, so add display: block;.

<div class="grid-wrapper">
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
  <div class="wrapper-item">
    <img src="https://cdn.shopify.com/s/files/1/0512/8126/4829/files/9.jpg?v=1652633500" />
  </div>
</div>


<style type="text/css">
  .grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: red;
  }
  
  .wrapper-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
</style>
ksav
  • 20,015
  • 6
  • 46
  • 66