Use flex to make column span rows

Question

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:

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.

ToklCz · Answer 1 · 2022-03-13T22:11:08.497

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.

Thanks for your answer, however your answer arranges the divs in a different order, and I'd prefer not to have a fixed height. I will look into implementing this through css grid however at your suggestion. Thanks! — mruboy, Mar 14 '22 at 01:21

Use flex to make column span rows

1 Answers1