CSS 网格去除间隙

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"><a href="#">The demo title of product</a></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"><a href="#">The demo title of product 01</a></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"><a href="#">The demo title of product product product 02</a></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"><a href="#">The demo title of product</a></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"><a href="#">The demo title of product 01</a></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"><a href="#">The demo title of product product product 02</a></h4> <div class="vnt-elm price"> Contact US </div> </div> </div>