Proportional grid?

I’d like to implement a design where I have three “containers”. The first container on the left is 4x2 and the other two are each half the height (thus 2x2 each) and stacked atop one another to the first container’s right.

Roughly something like this:

Not quite the normal ‘masonry’ design, insofar as it is not about columns, but things being promotional and stacked.

Is this possible using the Foundry family?

If you want a strict layout like that you’re going to have some difficulties within a responsive layout. This is because as the browser / device changes widths, your content will grow in length, and not always proportionately. If the grid sticks to these specific proportions you may end up with cropped content.

That said you could use a 2 column stack, and pair it with the Vertical Center stack, like so:

This would produce a layout like this:

Throw in some really simple content and you get something like this (which could be made better using the Margins stack):


This is excellent.

I should have been more clear. I do indeed wish for it to be responsive, such that (say) the smaller two on the right will fall into place below the larger one on smaller screens.

I’ll play around with this and report back. Many thanks, Adam.

This indeed did the trick, and very neatly and nicely. I hadn’t thought of using columns in this way, with various sized “stacks” within each column. What a neat and simple solution. Thank you again, Adam.


Sure thing. Modular stacks == almost infinite possibilities. :+1: