Flexbox Responsive layout question

HTML & CSS
1

Is it possible to use flexbox to do align content responsively to look something like this:

Desktop View 3-column:

a a a

b b b

b

c c c

Tablet View 2-column:

a a

b b

b

c c

So right now, I have my code set-up to look like this for the three column layout:

<div class="grid">

<div class="row">

<div class="col">

a

</div>

<div class="col">

a

</div>

<div class="col">

a

</div>

</div>

<div class="row">

<div class="col">

b

</div>

<div class="col">

bb

</div>

<div class="col">

b

</div>

</div>

<div class="row">

<div class="col">

c

</div>

<div class="col">

c

</div>

<div class="col">

c

</div>

</div>

</div>

The code above allows me to keep the contents align to each other on each row using display: flex on the rows, but the problem with doing this seems to be that there is no way that I can go from 3-column to 2-column without changing the HTML using this method. Is there a way to make this responsive or do I have to have a separate markup for the 2-column layout and the 3-column layout?

2

What should happen to the content of the third column when you drop to two columns? Is it simply not shown?

1 Like
3

No, it would move down to create a second row for when it transitions from Desktop (3-col) to tablet (2-col), that looks something like this:

a a

b b

b

c c

a

b

c

Sorry, I forgot to mention that in the original thread.

1 Like
4

If I understand you correctly then you would need to use CSS grid instead of flexbox as it seems you are moving elements out of their natural order.

Here’s an example.

Of course it’s very difficult to visualise layouts from diagrams because essentially it looks like you have 3 columns but there seems to be a gap. If it was just a straight forward 3 columns then flexbox would be ok but of course you couldn’t have the equal height internal structure inside the columns in the way that grid can handle it.

5

Yes, I am looking for something like that. Unfortunately for the platform we are supporting only allows us to use flexbox and no grids. Thanks for the information though!

6

You could do something similar with flex box but you would need to set each block a percentage width so that you don’t need row divs.

You could then change the width in your media queries to get 2 columns and then use the order property to move the right items to the end and then set those elements to full stretch.

You’d probably need some empty elements to create the gap but there may be around it using a margin right on the single item.

I’ll try and have a play around with it later and see what’s possible.

7

Here’s something to play with which seems to do what you want using flexbox.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.