Равномерная верстка карточек

146

11 марта 2019, 03:10

Недавно начал верстать и столкнулся с такой проблемой. Как сделать без отступов, полей и bootstrap равномерную многострочную верстку карточек товаров? Перебрал много вариантов, то все не то, если будет много позиций все поедет.

Answer 1

вот ЗДЕСЬ чуть по другому

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.items { 
  display: flex; 
  max-width: 800px; 
  margin: auto; 
  flex-wrap: wrap; 
} 
 
.item { 
  width: 200px; 
  margin: 4px; 
  outline: 1px solid #ccc; 
} 
 
.item p { 
  font: 16px/18px normal open-sans; 
  padding: 4px; 
}

<div class="items"> 
  <div class="item"> 
    <img src="http:placehold.it/200x200" alt=""> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, earum.</p> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/200x200" alt=""> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, earum.</p> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/200x200" alt=""> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, earum.</p> 
  </div> 
  <div class="item"> 
    <img src="http:placehold.it/200x200" alt=""> 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, earum.</p> 
  </div> 
</div>