Is this layout possible with css/flexbox?

HTML & CSS
1

Hi,

I have a grid with four images. All the images have the same proportions. They are markup is generated with wordpress.

http://puu.sh/lhVTI/18be23b0a4.jpg

here is a codepen to my current solution. But if you change the width or height of the images to say “200x300”, the edge to edge layout is broken. What I want is the layout to always have this edge to edge look, regardless of the image proportions AS LONG as all the images have the same proportions. And there needs to be the same amount of padding/whitespace around each griditem.

And of course it needs to be responsive.

if not with CSS only, possible with jQuery?

2

You could use flex-box to lay out the 3 side images evenly as a column with justify-content: space-between

3

Alright, something like this? http://codepen.io/anon/pen/NGEoQO?editors=110

Problem is the gutter isn’t consistent all around, but that might be hard to do?

4

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