Расположить по два квадрата в ряд с автоматическим переносом на новую строку

Question

Как расположить по два полностью адаптивных квадрата в ряд с автоматическим переносом на новую строку?

div {
height: 50vw; width: 50vw; float: left; margin: 10px; background-color: black;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

Можно попробовать вот так: все блоки сделать display: inline-block и ширину в половину ширины контейнера (минус 3% на отступы для блоков). Отступы можно сделать тоже в процентах (1% от ширины контейнера). И еще убрать float: left

Как-то так:

div {
height: 50vw; 
width: 47%;
display: inline-block;
margin: 1%;
background-color: black;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

body {
  margin: 10px;
}

div {
  background-color: black;
  float: left;
  margin: 10px;
}

div:nth-child(odd) {
  clear: both;
}

@media screen and (orientation:portrait) {
  div {
    height: 50vw;
    width: 50vw;
  }
}

@media screen and (orientation:landscape) {
  div {
    height: 50vh;
    width: 50vh;
  }
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

БЛОГ НА HUSL

Расположить по два квадрата в ряд с автоматическим переносом на новую строку

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