Creating fluid layouts with Grid and Flexbox

When it comes to implementing the design principles set by Microsoft to build attractive, intuitive, and interactive Windows 8 apps, layout is very important. It is common to define a page layout using HTML structural elements such as <div> and <table>, and the positioning style rules.

But now, there is a more flexible way to do it with the CSS3 advanced layout features, namely Grid layout and Flexbox (Flexible box) layout. These layout systems allow you to easily implement an adaptive and fluid layout.

The Grid layout

It offers a very simple way to create fluid and adaptable layouts for a Windows 8 app. It is ideal for implementing a full screen UI since the grid can automatically expand to fill in all the space that is available. The Grid layout allows you to align and position its child elements as columns and rows, entirely using CSS, and is independent of their order in the HTML code. It enables more fluidity in layouts than what...