Should we do this with flex? or JS will be needed


Another option would be grid.


I do not see that effect in my test browsers - ( IE11, Firefox and Chrome ). :unhappy:



For me it is resolving like this →


No, that's what @codeispoetry wants :slight_smile:

i.e. This is what is required:

...the first item in the first row has twice the height of the rest of the items.".


Hi there codeispoetry,

I have just read Paul's last post. :wonky:

I then went back to your original post and after a bit of squinting
I was able to make out that you had four boxes to the right. :eyebrows:

If you had used thick black lines in the first place I would have
coded it appropriately. :winky:



Hi there @coothead - Requirement is like this →


Hi there codeispoetry,

to make life a little easier for old fogies like me, please
use black - ( #000 ) lines for diagrams. :winky:



You have better acuity than I. I just recently got a new prescription for my corrective lenses, did squint (and try different focal length) several times, and still missed that. :eyeglasses:

Either way, I would still not use JavaScript to achieve the layout.




Yes, no need to complicate when with flex it is possible.


I would start with rough sketches of how I wanted it to be at different viewport widths (you have the desktop sketched). I am more a developer than a designer, so I keep my designs as simple as I can (to reduce the number of ways I can mess things up).

Because I am more familiar with desktop, I first get the desktop display looking OK and add media queries to change that to narrow view. You may prefer to design for mobile view first, either way works, it's up to you.

I would wrap the first row in a containing element, and the four right side boxes in another. Unless I wanted those four to shift into different positions in relation to each other, I think that would be enough for the first row.
For the lower row I would wrap the left two and the right two into containing elements so they would shift down paired.


These small ones: 1,2, 3, 4....8.......12......16......40 any number will be generated in series with a Wordpress loop.


I would not worry much about the WordPress code to begin with. Using random lorem ipsum text to represent the range of possible content should be enough to let you get the layout the way you want. The key is to use placeholder content that best matches what the dynamic content might be.


Ok. My point was we should remain as much flexible as we can while writing the HTML. Flex has the possibility of the self aligning.


Does my example not do what you want?

Or are you fixed to specific html?


It does.

I think your solution seems to be the solution and when populating item in 2nd row we have to run a loop in such a way that it should start rendering results from the 5th post onwards, and in the first row and the second column we will have to populate first 4 posts.

I was thinking of alternative HTML where I do not have to write so much code - That possibility is just an exploration of possible possibilities, if available not a mandate.


To use flex (and many other layout methods) you will need at least the two extra (column) wrappers to make this layout.
Flex is a linear layout, (like in-line) which works in either rows or columns which may wrap to a new line if allowed.
To get this layout where all boxes are siblings to a single parent wrapper, I think you would need grid.
Though possibly floats could do it, in a more cumbersome way.


Please correct me If i am wrong. I think grid is too early to implement in terms of the browser support.

I will remember this. A great take away.


Currently support for grid looks like this:-
The current major browsers support it, with IE looking a bit shaky as usual.


Looks like they have significantly fantastic support with the new browser versions.