In a flexbox grid, how do I prevent the first row from pushing down the second?

Question

I have a flex design that looks kinda like this:

.columns {
  flex-wrap: wrap;
  display: flex;
}

.column {
  display: block;
}

.column.is-8 {
   flex: none;
   width: 66.66667%;
}

.column.is-4 {
    flex: none;
    width: 33.33333%;
}

.box-1 {
  background-color: red;
  height: 200px;
}
.box-2 {
  background-color: yellow;
    height: 400px;
}
.box-3 {
  background-color: blue;
    height: 800px;
}

*, *::before, *::after {
    box-sizing: inherit;
}

<div class="columns">
  <div class="column is-8 box-1">
      Box 1
  </div>
  <div class="column is-4 box-2">
      Box 2
  </div>
  <div class="column is-8 box-3">
      Box 3
  </div>
</div>
<!-- on desktop: box 1, 2 and 3 -->
<!-- on mobile: box 1, 2 and 3 -->

How can I prevent box 2 from pushing down box 3? So it would look like this:

Update

I would like to add that on mobile, the boxes should be in the same order (e.g. 1, 2 then 3)

score 4 · Answer 1 · edited Oct 28 '20 at 08:50

You need to setup your template a bit differently as box 1 and 3 is in the same column. You can achieve the desired layout by wrapping box 1 and 3 in a div.

.columns {
  display: flex;
  width: 100%;
}

.column {
  width: 100%;
}

.column.is-8 {
  width: 66.66667%;
}

.column.is-4 {
  width: 33.33333%;
}

.box-1 {
  background-color: red;
  height: 200px;
}

.box-2 {
  background-color: yellow;
  height: 400px;
}


.box-3 {
  background-color: blue;
  height: 800px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

  <div class="columns">
  <div class="column is-8">
    <div class="box-1">Box 1</div>
    <div class="box-3">Box 3</div>
  </div>
  <div class="column is-4">
    <div class="box-2">Box 2</div>
  </div>
</div>

Hey @Abdallah Ajjawi, thanks for your answer. The only issue with this approach is that I would like the order (Box 1, 2, 3) to be the same on mobile. With your approach it would be 1,3, 2 on mobile — FooBar, Oct 28 '20 at 09:04

score 3 · Answer 2 · answered Oct 28 '20 at 09:49

here is another possibility with grid and auto-fit (see comment in CSS for the setting)

Snippet to run in full page and resize to see behavior.

.columns {
  display: grid;
  /*Below : 400px for minmax  is more than a third  of 1000px width of the container
  to draw at most 2 columns */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  width: 800px;
  margin: auto;
  max-width: 100%;
}

.column {
  border: solid;
}

.box-1 {
  background-color: red;
  height: 100px;
}

.box-2 {
  background-color: yellow;
  min-height: 100px;
  grid-row: span 2;
}

.box-3 {
  background-color: blue;
  height: 300px;
}

<div class="columns">
  <div class="column is-8 box-1">
    Box 1
  </div>
  <div class="column is-4 box-2">
    Box 2
  </div>
  <div class="column is-8 box-3">
    Box 3
  </div>
</div>

corn on the cob · Accepted Answer · 2020-10-28T12:59:35.707

You can try using this, using the grid layout. It lets you make grids (surprise, surprise) and it gives you more control over everything inside it. So something like this:

.columns {
  display: grid;
  width: 100%;
  grid-gap: 0;
  grid-template-columns: 2fr 1fr;
}

.column {
  display: block;
}

.box-1 {
  background-color: red;
  height: 200px;
  grid-column: 1;
  grid-row: 1;
}
.box-2 {
  background-color: yellow;
  height: 400px;
  grid-column: 2;
  grid-row: 1 / 3;
}
.box-3 {
  background-color: blue;
  height: 200px;
  grid-column: 1;
  grid-row: 2;
}

*, *::before, *::after {
    box-sizing: inherit;
}

<div class="columns">
  <div class="column is-8 box-1">
      Box 1
  </div>
  <div class="column is-4 box-2">
      Box 2
  </div>
  <div class="column is-8 box-3">
      Box 3
  </div>
</div>
<!-- on desktop: box 1, 2 and 3 -->
<!-- on mobile: box 1, 2 and 3 -->

Edit: to make it responsive, you can quite easily pop this at the end of your css:

@media (max-width: 700px) {
  .columns {
        display: block;
  }
}

.columns {
  display: grid;
  width: 100%;
  grid-gap: 0;
  grid-template-columns: 2fr 1fr;
}

.column {
  display: block;
}

.box-1 {
  background-color: red;
  height: 200px;
  grid-column: 1;
  grid-row: 1;
}
.box-2 {
  background-color: yellow;
  height: 400px;
  grid-column: 2;
  grid-row: 1 / 3;
}
.box-3 {
  background-color: blue;
  height: 200px;
  grid-column: 1;
  grid-row: 2;
}

*, *::before, *::after {
    box-sizing: inherit;
}

@media (max-width: 700px) {
  .columns {
    display: block;
  }
}

<div class="columns">
  <div class="column is-8 box-1">
      Box 1
  </div>
  <div class="column is-4 box-2">
      Box 2
  </div>
  <div class="column is-8 box-3">
      Box 3
  </div>
</div>
<!-- on desktop: box 1, 2 and 3 -->
<!-- on mobile: box 1, 2 and 3 -->

I see, interesting. I thought about grid too, but was hoping that it was possible with flex. Anyhow, how would you make box 1, 2 and 3 then be 100% on mobile? — FooBar, Oct 28 '20 at 09:12
For second issue, I saw a big issue with flex as it doesn't support rows :( there might be a really long, long workaround but I'm not sure :( — corn on the cob, Oct 28 '20 at 09:15
I am trying to implement your solution, however, I am getting "Invalid Property Value" for `grid-template-columns: 2fr / 1fr;` — FooBar, Oct 28 '20 at 12:27
let me update my post again :) don't forget that you can always accept an answer! — corn on the cob, Oct 28 '20 at 12:41
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223751/discussion-between-foobar-and-corn-on-the-cob). — FooBar, Oct 28 '20 at 12:46

In a flexbox grid, how do I prevent the first row from pushing down the second?

Update

3 Answers3