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

Question

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

уже даже предположений нету, как можно сверстать такой блок?

.storehouse__item1 {
  width: 31%;
  float: left;
}

.storehouse__item2 {
  width: 37%;
  float: left;
}

.storehouse__item3 {
  width: 31%;
  float: right;
}

.storehouse__item4 {
  width: 38%;
  float: left;
}

.storehouse__item5 {
  width: 31%;
  float: left;
}

.storehouse__item6 {
  width: 31%;
  float: right;
}

<div class="storehouse">
  <div class="storehouse__item storehouse__item1">
    <img src="css/img/storehouse/1.jpg" alt="">
    <div class="storehouse-info">
      <div class="storehouse__subtitle">Prepare for</div>
      <div class="storehouse__title">BLACK WEAR</div>
      <a href="#" class="btn work--btn">ORDER NOW</a>
    </div>
  </div>
  <div class="storehouse__item storehouse__item2">
    <div class="storehouse__subtitle">The</div>
    <div class="storehouse__title">STOREHOUSE</div>
    <div class="storehouse__text">Check our new collection</div>
  </div>
  <div class="storehouse__item storehouse__item3">
    <img src="css/img/storehouse/2.jpg" alt="">
    <div class="storehouse-info">
      <div class="storehouse__subtitle">Best team ever</div>
      <div class="storehouse__title">JOIN TO US.</div>
    </div>
  </div>
  <div class="storehouse__item storehouse__item4">
    <div class="storehouse__subtitle2">Kate Winslet</div>
    <div class="storehouse__title2">The Reader</div>
    <a href="#" class="btn work--btn">WATCH MOVIE</a>
  </div>
  <div class="storehouse__item storehouse__item5">
    <img src="css/img/storehouse/3.jpg" alt="">
  </div>
  <div class="storehouse__item storehouse__item6">
    <img src="css/img/storehouse/4.jpg" alt="">
    <div class="storehouse-info">
      <div class="storehouse__text">NEWEST NIKE COLLECTION</div>
      <a href="#" class="btn work--btn">CHECK MORE</a>
    </div>
  </div>
</div>

Answer 1

Ну вообще для верстки в двух осях flexbox не очень хорошо подходит. Для этого есть grid(это технология как раз и предназначена для верстки макетов в двух осях). А на флоатах уже давно не верстают, советую от них вообще отказываться. Вот вариант как сделать такое с помощью грида:

.storehouse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}
.storehouse__item {
  background: pink;
}
.storehouse__item1, .storehouse__item4 {
  grid-column: 1;
}
.storehouse__item2, .storehouse__item5 {
  grid-column: 2;
}
.storehouse__item3, .storehouse__item6 {
  grid-column: 3;
}
.storehouse__item1 {
  grid-row: span 2;
}
.storehouse__item2 {
  grid-row: span 1;
}
.storehouse__item3 {
  grid-row: span 1;
}
.storehouse__item4 {
  grid-row: 3;
}
.storehouse__item5 {
  grid-row: span 2;
}
.storehouse__item6 {
  grid-row: span 2;
}

<div class="storehouse">

        <div class="storehouse__item storehouse__item1">
            <img src="css/img/storehouse/1.jpg" alt="">
            <div class="storehouse-info">
                <div class="storehouse__subtitle">Prepare for</div>
                <div class="storehouse__title">BLACK WEAR</div>
                <a href="#" class="btn work--btn">ORDER NOW</a>
            </div>
        </div>

        <div class="storehouse__item storehouse__item2">
            <div class="storehouse__subtitle">The</div>
            <div class="storehouse__title">STOREHOUSE</div>
            <div class="storehouse__text">Check our new collection</div>
        </div>

        <div class="storehouse__item storehouse__item3">
            <img src="css/img/storehouse/2.jpg" alt="">
            <div class="storehouse-info">
                <div class="storehouse__subtitle">Best team ever</div>
                <div class="storehouse__title">JOIN TO US.</div>
            </div>
        </div>

        <div class="storehouse__item storehouse__item4">
            <div class="storehouse__subtitle2">Kate Winslet</div>
            <div class="storehouse__title2">The Reader</div>
            <a href="#" class="btn work--btn">WATCH MOVIE</a>
        </div>

        <div class="storehouse__item storehouse__item5">
            <img src="css/img/storehouse/3.jpg" alt="">
        </div>

        <div class="storehouse__item storehouse__item6">
            <img src="css/img/storehouse/4.jpg" alt="">
            <div class="storehouse-info">
                <div class="storehouse__text">NEWEST NIKE COLLECTION</div>
                <a href="#" class="btn work--btn">CHECK MORE</a>
            </div>
        </div>

</div>

Бэкграунд у блоков установил для наглядности, как и отступы между ними(свойство grid-gap)

Answer 2

Данную задачу безусловно можно реализовать с использованием Flex, но проще и удобнее это сделать через CSS Grid Layout:

Рабочий пример:

.wrapper {
  display: grid;
  grid-template-columns: max-content max-content max-content max-content;
  grid-template-rows: max-content max-content max-content;
}
.wrapper > div {
  border-width: 1px;
  border-style: solid;
}

.div1 {
  grid-column: 1 / 1;
  grid-row: 1 / span 2;
  min-width: 100px;
  min-height: 100px;
  border-color: red;
}

.div2 {
  grid-column: 1 / span 2;
  grid-row: 3 / 3;
  min-width: 100px;
  min-height: 50px;
  border-color: green;
}

.div3 {
  grid-column: 2 / span 3;
  grid-row: 1 / 1; 
  min-width: 120px;
  min-height: 40px;
  border-color: blue;
}

.div4 {
  grid-column: 2 / 2;
  grid-row: 2 / 2;
  min-width: 20px;
  min-height: 40px;  
  border-color: pink;
}

.div5 {
  grid-column: 3 / 3;
  grid-row: 2 / span 3;
  min-width: 100px;
  min-height: 100px; 
  border-color: orange;
}

.div6 {
  grid-column: 4 / 4;
  grid-row: 1 / 1; 
  min-width: 100px;
  min-height: 40px;
  border-color: violet;
}

.div7 {
  grid-column: 4 / 4;
  grid-row: 2 / span 3; 
  min-width: 100px;
  min-height: 40px;
  border-color: cornflowerblue;
}

<div class="wrapper">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
  <div class="div5">5</div>
  <div class="div6">6</div>
  <div class="div7">7</div>
</div>

БЛОГ НА HUSL

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

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