CSS Yan Yana ve Alt Alta Sıralama

Bir proje üzerinde çalışıyorum ve divleri yan yana sıralamak istiyorum fakat yan yana 2 tane div olduktan sonra alt satıra geçsin böyle böyle devam etsin. (Şu anda yanyana 2 den fazla koyarsam kendi kendine sıkıştırıyo, genişliğini kısıyor.)

Kapsayici elemanınıza;

 columns: 2;
-webkit-columns: 2;
 width: 100%;

Genişliği ve yüksekliği olan float:left verilmiş 2 div koyup sonrasına

<div style="clear:both;height:0"></div>

Tekrar 2 div ve bu böyle devam eder

Maalesef hocam bu işimi görmez admin panelinden birer birer eklenceği için bunu yapamam.

Bunu tam olarak beceremedim sanırım pmden detay verebilir misiniz?

https://jsfiddle.net/q4ge5s1m/

<style>
.kapsayici {
columns: 2;
-webkit-columns: 2;
width: 100%;
gap:10px;
}

.kapsayici .eleman {
display: block;
padding:15px;
background:#34495e;
margin-bottom:10px;
border-radius:6px;
color:#fff;
}
</style>

<div class="kapsayici">
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
<div class="eleman">
Eleman
</div>
</div>

Arkadaş açıklamış.
Örnek kod şöyle girilebilir.

<div style="width:50%;float:left;display:block;">içerik 1...</div>
<div style="width:50%;float:left;display:block;">içerik 2...</div>
<div style="clear:both;height:0"></div>
<div style="width:50%;float:left;display:block;">içerik 3...</div>
<div style="width:50%;float:left;display:block;">içerik 4...</div>
<div style="clear:both;height:0"></div>
<div style="width:50%;float:left;display:block;">içerik 5...</div>
<div style="width:50%;float:left;display:block;">içerik 6...</div>

https://jsfiddle.net/zcm8pdof/

Float left , clear both vs artık milatta kaldı..

CSS3 ile birlikte; Divleri yanyana getirmek ve sığmadığında alt satıra geçmesi için flex yapısını kullanman gerekir. Aşağıda yazdığım css'i kapsayıcı div'e vermen gerekiyor. Sığmadığı zaman alt satıra düşeceği için boşlukta gerekeceğinden gap parametresini de tanımlayabilirsin

display:flex;
flex-wrap:wrap;
gap:10px;