Позиционирование блоков, сетка

Question

Всем привет, нужно реализовать такое же расположение блоков как я сделал ниже, только с одним условием: неважно сколько блоков у нас будет, 1 или 10, они всегда должны распологаться все на своих местах.

Пробдема моего кода, что когда у нас два блока к примеру, все разъезжается. Все эти блоки это посты блога, нужно чтоб также работала автоподгрузка блоков, которая будет реализована на сайте. Буду рад любым идеям.

.wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wrapper div{
width : 31%;
background: green;
height: 80px;
margin-bottom: 10px;
}
.wrapper div.horizontal{
width : 66%;
}

<div class="wrapper">
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div class="horizontal">
  </div>
  <div class="horizontal">
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</div>

Answer 1

Я попробовал сделать это, с помощью grid, также изменил некоторые стили:

    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }
    .wrapper div{
      background: green;
      height: 80px;
    }

Answer 2

При удалении любого блока будет просто пустота.

.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 4; }
.div6 { grid-area: 3 / 1 / 4 / 3; }
.div7 { grid-area: 3 / 3 / 4 / 4; }
.div8 { grid-area: 4 / 1 / 5 / 2; }
.div9 { grid-area: 4 / 2 / 5 / 3; }
.div10 { grid-area: 4 / 3 / 5 / 4; }

.parent>div {background: #eee;height: 100px;}

<div class="parent">
  <div class="div1"> </div>
  <div class="div2"> </div>
  <div class="div3"> </div>
  <div class="div4"> </div>
  <div class="div5"> </div>
  <div class="div6"> </div>
  <div class="div7"> </div>
  <div class="div8"> </div>
  <div class="div9"> </div>
  <div class="div10"> </div>
</div>

Answer 3

Решил эту проблему с помощью добавления margin тем элементам, которые могут выпасть из сетки.

*{
  margin: 0;
  padding: 0;
}
.wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.wrapper div{
width : 30%;
background: green;
height: 80px;
margin-bottom: 10px;
}
.wrapper div.horizontal{
width : 65%;
}
.wrapper div:nth-child(10n + 2 ), .wrapper div:nth-child(10n + 9){
 margin-right: auto;
 margin-left: 5%;
}

<div class="wrapper">
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class="horizontal">
  </div>
  <div class="horizontal">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
   <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class="horizontal">
  </div>
  <div class="horizontal">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
  <div class ="small">
  </div>
 
</div>

БЛОГ НА HUSL

Позиционирование блоков, сетка

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