Как сделать такой двухколоночный блок?

Question

[![

.section__product-items {
column-count: 2;
width: 900px;

}

<div class="section__product-items">
    <div class="section__product-item">
        <img src="" alt="">
    <h4 class="product__name">Vicaragua Coffee Beans</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Espresso Ristretto</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Ethiopia Coffee</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
    <img src="" alt="">
<h4 class="product__name">Vicaragua Coffee Beans</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
<img src="" alt="">
<h4 class="product__name">Espresso Ristretto</h4>
<span class="product__cost"></span>    
</div>

<div class="section__product-item">
<img src="" alt="">
<h4 class="product__name">Ethiopia Coffee</h4>
<span class="product__cost"></span>    
</div>

</div>

]2]2

Answer 1

Заранее извиняюсь за криповость примера... но, если ничего не придумаете лучше, может и мой вариант Вам подойдет. P.S. лучше смотреть с компа и развернуть результат на всю страницу

body {
  background-color: gold;
}

.container {
  width: 900px;
  height: auto;
  position: relative;
  margin: auto;
}

.block1 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 20px;
  left: 20px;
}

.circle1 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block2 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 20px;
  right: 20px;
}

.circle2 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_2 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_2 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block3 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 120px;
  left: 20px;
}

.circle3 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_3 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_3 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block4 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 120px;
  right: 20px;
}

.circle4 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_4 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_4 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block5 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 220px;
  left: 20px;
}

.circle5 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_5 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_5 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

.block6 {
  width: 400px;
  height: 70px;
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  background-color: lightgray;
  position: absolute;
  top: 220px;
  right: 20px;
}

.circle6 {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  background-image: url("https://ir.ozone.ru/s3/multimedia-v/c250/6073476175.jpg");
  background-size: 100%;
}

.text1_6 {
  font-size: 20px;
  position: absolute;
  top: -5px;
  left: 30%;
}

.text2_6 {
  font-size: 18px;
  position: absolute;
  top: 20px;
  right: 30px;
}

<div class="container">
  <div class="block1">
    <div class="circle1"></div>
    <p class="text1">Vicaragua Coffee Beans</p>
    <p class="text2">$29</p>
  </div>
  <div class="block2">
    <div class="circle2"></div>
    <p class="text1_2">Vicaragua Coffee Beans</p>
    <p class="text2_2">$29</p>
  </div>
  <div class="block3">
    <div class="circle3"></div>
    <p class="text1_3">Vicaragua Coffee Beans</p>
    <p class="text2_3">$29</p>
  </div>
  <div class="block4">
    <div class="circle4"></div>
    <p class="text1_4">Vicaragua Coffee Beans</p>
    <p class="text2_4">$29</p>
  </div>
  <div class="block5">
    <div class="circle5"></div>
    <p class="text1_5">Vicaragua Coffee Beans</p>
    <p class="text2_5">$29</p>
  </div>
  <div class="block6">
    <div class="circle6"></div>
    <p class="text1_6">Vicaragua Coffee Beans</p>
    <p class="text2_6">$29</p>
  </div>
</div>

БЛОГ НА HUSL

Как сделать такой двухколоночный блок?

Ответы (1 шт):