The preview URL: https://asilklife.myshopify.com/?preview_theme_id=132753031414
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>>Solution :
<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>