Я хочу показать продукты, как разные Gird. я думаю, что я не знаю, что мой вопрос, но я показываю продукт, как это изображение

Question

Я хочу показать продукты, как разные Gird. Я думаю, я не знаю, что мой вопрос, но я показываю продукт, как это изображение:

Я попытался загрузить, но ответа не последовало.

мой код:

<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5"  class="img-responsive">
    <div class="producttitle">Product 2</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext">£8.95</div>
    </div>
</div>
<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
    <div class="producttitle">Product 2</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext">£8.95</div>
    </div>
</div>
<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
    <div class="producttitle">Product 3</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext">£8.95</div>
    </div>
</div>
<div class="col-md-2 column productbox">
    <img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive">
    <div class="producttitle">Product 4</div>
    <div class="productprice">
        <div class="pull-right"><a href="#" class="btn  btn-danger btn-sm" role="button">BUY</a></div>
        <div class="pricetext"> £8.95</div>
    </div>
</div>

Кто-нибудь может мне помочь?

спасибо

Answer 1

Вы можете добиться этого, используя свойство CSS3 Flexbox. Здесь это ссылка.

* {box-sizing: border-box}
body {margin: 0}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<div class="row"> 
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
  </div>  
  <div class="column">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/falls2.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/nature.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mist.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/paris.jpg" alt="">
  </div>
  <div class="column">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/ocean.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/wedding.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/mountainskies.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/rocks.jpg" alt="">
    <img src="https://www.w3schools.com/w3images/underwater.jpg" alt="">
  </div>
</div>