Responsive layout


Hi Guys making head way with repsonsive layouts.

I have a sample app

Where the 2 grid rows bounds are set to:
All auto width 100%
The columns are set to:
bottom auto
height auto
left auto
right auto
top auto
width blank
with style = display: flex;
align-items: center;
justify-content: center;
size-lg 3
size-md 4
size-sm 6
size-xs 12

This get me 90% of where I need to be. As the screen resizes the containers shrink and the columns adapt and move down / up as expected.

I need to now get the 3 columns to be 33% width so they are all centred. If I change the width to 33% the columns stop moving up and down ( i.e. they just scale )

Is there some magic css / code I can use to get this effect.

app attached if anyone fancies having a play around.


Steve Warby

getTest.nsx (74.6 KB)