Can the windows metro style layout be reproduced with flexboxes?

3.7k Views Asked by At

enter image description here

Can this type of layout be implemented using non-nested flex boxes?

I know that flex-wrap will make the boxes go on the next line if they don't fit, but how can I also get boxes with variable height like in the screenshot above, without nesting more flex boxes?

1

There are 1 best solutions below

0
On

Yes, with some normal CSS float based grids, it is possible to create boxy layouts like these. For example see this example and how the author did it.

Also MS proposed a standard called "CSS Grid Layout" to the W3C which is described in MSDN. It allows to create such layouts without flexbox support. It never got adopted outside IE but if you only need to care about IE, you can use it.