Metro UI layout

HTML & CSS
1

Whats the best way to code up in CSS a grid/tile type layout similar to Windows Metro UI?

I know there is a framework out there called Metro UI CSS but I want to learn about raw CSS for now (I’d consider if for rapid development further down the line).

If my page was to look something like this - http://understandingexistence.net/wp-content/uploads/2012/12/065-metro-layouts-windows-8-phone.jpg

Do I construct it by rows or columns?

How should i build the tile which is split into 4 smaller tiles?

Thanks.

2

Divs and things like that are still the way to go. Do you need this to be responsive? You can learn a lot from the Metro UI site itself. Just use your web inspector to study the HTML and CSS.

3

I recently read about ‘divitus’ and I think I have it. I tend to wrap everything with DIVs so I can use it for layout purposes.

Would be nice if the site was responsive, and also to work on IE6.

4

Just use divs where they are actually needed to accomplish the layout. Divitis occurs when far more divs are used than are needed.

In terms of how to construct it, it depends on what content you want in there. Your image above doesn’t give an indiction of what the page contains, other than boxes, which isn’t a lot to go on. But I guess, as a general guideline, you’d start a layout like that with a wrapper div that contains three full width divs, one atop the other. In other words, you start your inner structure with three rows of divs.