4

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:

enter image description here

Update

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

Improve this question
0

3 Answers 3

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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
3

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>

Improve this answer

Comments

1

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 -->

Improve this answer

7 Comments

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?
Just edited post.
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 :(
I am trying to implement your solution, however, I am getting "Invalid Property Value" for grid-template-columns: 2fr / 1fr;
Ah, it had to be grid-template-columns: 2fr 1fr;
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.