Я пытаюсь создать сетку, которая должна выглядеть примерно так.
но он отображает как
что это на самом деле выглядит
вот мой код HTML
<div style="display: flex; flex-wrap: wrap">
<div class="item" style="height: 400px; background-color: #ddd"></div>
<div class="item" style="height: 200px; background-color: #000"></div>
<div class="item" style="height: 200px; background-color: #ececec"></div>
<div class="item" style="height: 700px; background-color: #DC0F0F"></div>
<div class="item" style="height: 400px; background-color: #B429A2"></div>
<div class="item" style="height: 200px; background-color: #009EBA"></div>
<div class="item" style="height: 200px; background-color: #694141"></div>
<div class="item" style="height: 400px; background-color: #29B436"></div>
<div class="item" style="height: 200px; background-color: #74B2BD"></div>
<div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>
Класс элемента имеет статическую ширину: 33%.
Я понимаю, что делать что-то подобное в JS вполне возможно. Но я ищу чистое решение CSS.
Спасибо