CSS grid remove gaps - html

Question

How to remove space in div class title. I want no margin width div class price
Always have space in div class title.
I try align-content: flex-start or align-items: flex-start for main_product but don't work.
If I use align-items: center for item, then..
img {
max-width: 100%;
display: block;
}
.vnt-elm {
width: 100%;
float: left;
}
.main_product {
max-width: 500px;
display: grid;
grid-gap: 10px;
}
.main_product .item {
display: grid;
grid-template-columns: 80px auto;
grid-gap: 10px;
grid-row-gap: 0;
background: #F5F5F5;
}
.main_product .item .thumb {
grid-row: 1 / 3;
}
.main_product .item .title {
background: #BA95FF;
margin: 0;
padding: 0;
}
.main_product .item .price {
background: #9CD0D8;
}
<div class="vnt-elm main_product">
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product</h4>
<div class="vnt-elm price">
<del><span class="woocommerce-Price-amount amount"><bdi>500.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></del>
<ins><span class="woocommerce-Price-amount amount"><bdi>380.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></ins>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product 01</h4>
<div class="vnt-elm price">
<span class="woocommerce-Price-amount amount"><bdi>650.000<span class="woocommerce-Price-currencySymbol">U</span></bdi>
</span>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product product product 02</h4>
<div class="vnt-elm price">
Contact US
</div>
</div>
</div>
https://codepen.io/dinhcode/pen/yLOVoGV
Any idea for case. thanks!

Answer 1

You might need too to set your row template :
grid-template-rows:auto 1fr ;
img {
max-width: 100%;
display: block;
}
.vnt-elm {
width: 100%;
float: left;
}
.main_product {
max-width: 500px;
display: grid;
grid-gap: 10px;
}
.main_product .item {
display: grid;
grid-template-columns: 80px auto;
grid-template-rows:auto 1fr ;
grid-gap: 10px;
grid-row-gap: 0;
background: #F5F5F5;
}
.main_product .item .thumb {
grid-row: 1 / 3;
}
.main_product .item .title {
background: #BA95FF;
margin: 0;
padding: 0;
}
.main_product .item .price {
background: #9CD0D8;
}
<div class="vnt-elm main_product">
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product</h4>
<div class="vnt-elm price">
<del><span class="woocommerce-Price-amount amount"><bdi>500.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></del>
<ins><span class="woocommerce-Price-amount amount"><bdi>380.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span></ins>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product 01</h4>
<div class="vnt-elm price">
<span class="woocommerce-Price-amount amount"><bdi>650.000<span class="woocommerce-Price-currencySymbol">U</span></bdi></span>
</div>
</div>
<div class="vnt-elm item">
<div class="vnt-elm thumb">
<img src="https://via.placeholder.com/150" alt="">
</div>
<h4 class="vnt-elm title">The demo title of product product product 02</h4>
<div class="vnt-elm price">
Contact US
</div>
</div>
</div>