'Use flex to make column span rows [duplicate]

I have a series of divs laid out with flex in a grid, and I wanted to create a layout like below image, where the last column of the first row takes up the entire height of the grid container:

enter image description here

The numbers indicate the order of the divs in the HTML. I'm a bit new to flex CSS. Is this possible? I do have control over the HTML structure, so if it needs a different structure I can do that. This is my HTML:

.steps-body {
  flex-wrap: wrap;
  display: flex;
}

.step-container {
  text-align: center;
  margin: 2%;
  width: 20%;
  border: 1px #000 solid;
}
<div class="steps-body">
  <div class="step-container">
    <div class="step-number">1</div>
  </div>
  <div class="step-container">
    <div class="step-number">2</div>
  </div>
  <div class="step-container">
    <div class="step-number">3</div>
  </div>
  <div class="step-container">
    <div class="step-number">4</div>
  </div>
  <div class="step-container">
    <div class="step-number">5</div>
  </div>
  <div class="step-container">
    <div class="step-number">6</div>
  </div>
  <div class="step-container">
    <div class="step-number">7</div>
  </div>
</div>

In mobile, I'd want these steps to stack evenly.

htmlcsslayoutflexbox


Solution 1:[1]

It would be better with grid but look at this solution

.steps-body {
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.step-container {
  text-align: center;
  margin: 2%;
  width: 20%;
  border: 1px #000 solid;
  flex: 1;
}

.bigger {
  flex: 2 !important;
}
<div class="steps-body">
  <div class="step-container">
    <div class="step-number">1</div>
  </div>
  <div class="step-container">
    <div class="step-number">2</div>
  </div>
  <div class="step-container">
    <div class="step-number">3</div>
  </div>
  <div class="step-container">
    <div class="step-number">4</div>
  </div>
  <div class="step-container">
    <div class="step-number">5</div>
  </div>
  <div class="step-container">
    <div class="step-number">6</div>
  </div>
  <div class="step-container">
    <div class="step-number bigger">7</div>
  </div>
</div>

Sorry but snippet running doesn't work, but in the new window, it works.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions