CSS Flexbox – First row with 1 item, second row with 2 items

Question

What i am trying to achieve is this:

All of the 3 items are on the same level. The first one has some additional css-classes. Codewise it is not possible to put a wrapper around the two items on the right side. So the code looks like this:

<div class="wrapper">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item2 item2-extra"></div>
</div>

The CSS is the following at the moment:

.wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.item1 {
    margin-bottom: 4rem;
    height: auto;
    order: 1;
    width: calc(50% - 6rem);
    margin: 0 3rem 0 0;
}
.item2 {
    order: 2;
    width: calc(50% - 6rem);
    margin: 0 3rem;
}
.item2-extra {
    order: 3;
}

The result of this is:

I need to have it in Flex or CSS-Grid to change the order of the 2 items on the right depending on the viewport.

Since all 3 items can have variable heights and I have to fulfill our UI/UX guidelines regarding spaces between elements, the items on the right can not simply share the height equally. Right after the first one ends, the second one needs to start.

My previous post got marked as duplicate, so it told me to ask a new one if the problem is not resolved. All 3 items can have variable heights, so Make a div span two rows in a grid is not a solution as it was marked before.

Code example: https://jsfiddle.net/0hc37eo9/

the solution of the duplicate still apply even for different height. The main trick is to use (1) column direction or (2)CSS grid .. then you modify the code like you want (I am adding more duplicate) — Temani Afif, Apr 01 '20 at 13:56

score 3 · Answer 1 · answered Apr 01 '20 at 13:54

If I understand the question, I think you're looking for...

.wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 200px;
    width: 100%;
}

.item1 {
    background: red;
    order: 1;
    flex: 0 0 100%;
}

.item2 {
    background: blue;
    order: 2;
    flex: 0 0 50%;
}

.item2-extra {
    background: green;
    order: 3;
}

https://codeply.com/p/C8extk0PUH

CSS Flexbox – First row with 1 item, second row with 2 items

1 Answers1