Как расположить блоки таким образом?

132

01 января 2022, 18:10

Как расположить блоки, как на фото?

Чтобы блоки были строго выровнены относительно один одного, были отступы, адаптивность. Через FLexbox или Grid? Или еще есть варианты? Как будет лучше?

Answer 1

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.container { 
  width: 600px; 
  margin: 30px auto; 
} 
 
.container__inner { 
  display: flex; 
  align-items: center; 
  flex-wrap: wrap; 
  margin: -15px; 
} 
 
.container__item { 
  padding: 15px; 
  width: 33.333333333%; 
} 
 
.container__item:nth-child(1) { 
  width: 66.666666666%; 
} 
 
.block { 
  border: 1px solid black; 
  height: 150px; 
}

<div class="container"> 
  <div class="container__inner"> 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
 
    <div class="container__item"> 
      <div class="block"></div> 
    </div> 
  </div> 
</div>