Как сверстать блоки с картинками как на картинке?

Question

Каким образом можно сверстать как на картинке?

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #444;
}

.img-1 {
  display: block;
  width: 100%;
  height: 430px;
  background: #fff url(https://images.pexels.com/photos/326311/pexels-photo-326311.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: contain;
}

.img-2 {
  width: 100%;
  height: 180px;
  background: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: contain;
}

.img-3 {
  width: 100%;
  height: 180px;
  background: url(https://images.pexels.com/photos/952670/pexels-photo-952670.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: contain;
}

.img-4 {
  width: 100%;
  height: 180px;
  background: url(https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: contain;
}

.img-5 {
  width: 100%;
  height: 430px;
  background: url(https://images.pexels.com/photos/1227511/pexels-photo-1227511.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: contain;
}

.img-6 {
  width: 100%;
  height: 180px;
  background: url(https://images.pexels.com/photos/547114/pexels-photo-547114.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: contain;
}

<div class="container">
  <div class="img-wrapper">
    <div class="img-1"></div>
  </div>
  <div class="img-wrapper">
    <div class="img-2"></div>
  </div>
  <div class="img-wrapper">
    <div class="img-3"></div>
  </div>
  <div class="img-wrapper">
    <div class="img-4"></div>
  </div>
  <div class="img-wrapper">
    <div class="img-5"></div>
  </div>
  <div class="img-wrapper">
    <div class="img-6"></div>
  </div>
</div>

Answer 1

По вашей картинке. Полностью адаптивно.

* {
  margin: 0;
  padding: 0;
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}

.wrapper_01 {
  position: relative;
  overflow: hidden;
  padding: 2%;
  background-color: #191819;
}

.wrapper_01 .wrp__left,
.wrapper_01 .wrp__right {
  display: inline-block;
  float: left;
}

.wrapper_01 .wrp__left {
  width: 50%;
}

.wrapper_01 .wrp__right {
  float: right;
  width: 50%;
}

.wrapper_01 .block {
  width: 100%;
  padding: 25% 0;
  background-color: #ffffff;
}

.wrapper_01 .wrp {
  width: 100%;
  padding: 0;
}

.wrapper_01 .block__wrp__01,
.wrapper_01 .block__wrp__02 {
  display: inline-block;
  float: left;
  width: 40%;
  margin: 0 0 0 10%;
}

.wrapper_01 .block__01,
.wrapper_01 .block__02 {
  width: 100%;
  padding: 25% 0;
  background-color: #ffffff;
}

.wrapper_01 .block__01 {
  margin-top: 100%;
}

.wrapper_01 .block__02 {
  margin-top: 150%;
}

.wrapper_02 {
  position: relative;
  overflow: hidden;
  padding: 2%;
  background-color: #191819;
}

.wrapper_02 .wrp__left,
.wrapper_02 .wrp__right,
.wrapper_02 .wrp__center {
  display: inline-block;
  float: left;
}

.wrapper_02 .wrp__left,
.wrapper_02 .wrp__right {
  width: 25%;
}

.wrapper_02 .wrp__left {
  display: inline-block;
  float: left;
  width: 20%;
  margin: 0 5% 0 0;
}

.wrapper_02 .wrp__right {
  display: inline-block;
  float: right;
  width: 20%;
  margin: 0 0 0 5%;
}

.wrapper_02 .wrp__center {
  width: 50%;
}

.wrapper_02 .wrp__left .block,
.wrapper_02 .wrp__right .block {
  width: 100%;
  padding: 25% 0;
  background-color: #ffffff;
}

.wrapper_02 .wrp__center .block {
  width: 100%;
  padding: 25% 0;
  background-color: #ffffff;
}

.wrapper_02 .wrp__center .block {
  margin-top: 15%;
}

.wrapper_02 .wrp__right .block {
  margin-top: 135%;
}

<div class="wrapper_01">
  <div class="wrp__left">
    <div class="block">1</div>
  </div>
  <div class="wrp__right">
    <div class="wrp">
      <div class="block__wrp__01">
        <div class="block__01">2</div>
      </div>
      <div class="block__wrp__02">
        <div class="block__02">3</div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper_02">
  <div class="wrp__left">
    <div class="block">4</div>
  </div>
  <div class="wrp__center">
    <div class="block">5</div>
  </div>
  <div class="wrp__right">
    <div class="block">6</div>
  </div>
</div>

БЛОГ НА HUSL

Как сверстать блоки с картинками как на картинке?

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