CODEWITHSUNDEEP
htmlcsscss-grid
DinhCode
DinhCode

Reputation: 120

CSS grid remove gaps

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.

enter image description here

If I use align-items: center for item, then..

enter image description here

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!

Upvotes: 1

Views: 147

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105863

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>

Upvotes: 1

Related Questions