Как сделать чтобы 5 элемент был под 2? 8 под 5 и т д?

Question

Как сделать чтобы 5 элемент был под 2? 8 под 5 и т д ?

.block {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 50px;
  border: 2px solid red;
  flex-wrap: wrap;
}

.box {
  width: 300px;
  height: 100px;
  margin: 10px;
  background: #dadada;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<div class="block">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

Answer 1

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

window.onload = () => {
  const boxCount = document.querySelectorAll('.box').length;
  if (boxCount % 3 === 2) {
    const div = document.createElement('div')
    div.className = "empty-box";
    document.querySelector('.block').append(div);
  }
};

.block {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}

.block>*{
  width: 30%;
  height: 100px;
  margin: 10px;
  background: #dadada;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.empty-box {
  opacity: 0;
}

<div class="block">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

Answer 2

.block {
  width: 1200px;
  display: flex;
  justify-content: flex-start;
  margin: 50px;
  border: 2px solid red;
  flex-wrap: wrap;
}

.box {
  width: 300px;
  height: 100px;
  margin: 10px 0 10px 140px;
  background: #dadada;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.box:nth-child(3n + 1) {
  margin-left: 10px;
}

<div class="block">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

Answer 3

Решение на гридах.

.block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
  width: 1200px;
  margin: 50px;
  border: 2px solid red;
}

.box {
  /*width: 300px;*/
  width: 100%;
  height: 100px;
  /*margin: 10px;*/
  background: #dadada;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

<div class="block">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

Answer 4

Зачем здесь флексы?

.block{
  width:1200px;
  border:2px solid red;
  font-size:0;
}

.box{
  width:300px;
  height:100px;
  margin:10px;
  font-size:16px;
  background:#dadada;
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2);
  display:inline-block;
  vertical-align:top;
}

<div class="block">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

БЛОГ НА HUSL

Как сделать чтобы 5 элемент был под 2? 8 под 5 и т д?

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