Блог

Главная - Вопросы по программированию - CSS сетка удаляет пробелы

CSS сетка удаляет пробелы

#html #css #css-grid

#HTML #css #css-сетка

Вопрос:

Как убрать пробел в классе div title . Мне не нужен класс div ширины поля price

В классе div всегда есть свободное место title .

Я пытаюсь align-content: flex-start или align-items: flex-start для main_product , но не получается.

введите описание изображения здесь

Если я использую align-items: center для item , то..

введите описание изображения здесь

 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

Любая идея для дела. Спасибо!

Комментарии:

1. мне не ясно, чего вы хотите .. пожалуйста, предоставьте ожидаемый скриншот или картинку?

2.вы, вероятно, хотите: .main_product { max-width: 500px; display: grid; grid-gap:0 10px;/* HERE*/ } developer.mozilla.org/en-US/docs/Web/CSS/gap

3. @Abdullah Al Noor Я хочу очистить ширину пробела после div: imgur.com/ngdT8og

4. @G-Cyrillus не работает. дайте мне проверить мое изображение imgur.com/ngdT8og

5. вы хотите выровнять текст по вертикали по центру?

Ответ №1:

Возможно, вам также потребуется установить шаблон строки :

 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>