How to achieve this style
I want to create an style like in the picture, should i use grid or flex? how?
6 Replies
I'd personally use flex. Flex parent container. Each column is another flex container.
n + 1 / odd child containers in parent flex container have a margin top. Use media queries to adjust for mobile (or desktop if mobile first)I agree with @vince, however, I really love grid for this.
Here's a Pen of how I achieved it with grid:
https://codepen.io/eioluseyi/pen/GRaKpRq
It's responsive, so you can shriink the view to test it.
That wouldn't work with the mobile view shown on the right
A grid for the layout and a translateY on every odd elements in a media query for "desktop" would work tho
And it would require less markup
Ohhh I see now
thank you @vince , @EIO and @Rägnar for your help, Aprreciated! I already achieve the style.
If you wanna see my version here it is:
https://codepen.io/Ziphour/pen/VwOZbJZ