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 would be possible with the approach that uses floats or scripts.

The following example demonstrates how we traditionally used floats to position elements:

The HTML code is as follows:

<div class="container">
  <div class="leftDiv"></div>
  <div class="rightDiv"></div>
</div>

The CSS code is as follows:

.container { width: 200px; height:50px; border: 1px solid black; }
.leftDiv { float:left; width: 100px; height:50px;background-color:blue}
.rightDiv { float:right; width: 50px; height:50px;background-color:red}

The preceding code will result in the following multicolor box. The container has a black border surrounding the two divs inside, the blue div to the left and the red one to the right, and the white space in between is the remaining unoccupied space:

The Grid layout is specified by setting the display style rule property of an element to -ms-grid, or you can use the -ms-inline-grid property for an inline-level grid element. You may have noticed the vendor prefix -ms(Microsoft-specific), which is because the status of this CSS feature is still a Working Draft; adding this vendor prefix allows it to work with both Internet Explorer 10 and Windows Store apps using JavaScript in Windows 8. The following is an example:

.divGrid {
  display: -ms-grid;
  -ms-grid-columns: 120px 1fr;
  -ms-grid-rows: 120px 1fr;
}
.column1row1 {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.column2row1 {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

The display: -ms-grid; property creates a grid; afterwards, we define the columns and rows and specify their sizes using the following properties: -ms-grid-column and -ms-grid-rows. The -ms-grid-columns property specifies the width of each column, and -ms-grid-rows specifies the height of each row, in that grid. The width and height values in these two properties respectively are separated by a space character. In the preceding example, the -ms-grid-columns: 120px 1fr; property creates two columns; the first one has a width of 120 px and the second one has a width value of 1 fr, that is, one fractional unit, which means that the width of the second column will automatically fill in all of the remaining available space. The same concept applies for rows. The remaining two classes in the preceding code snippet will position the elements in these classes into columns and rows of the grid using the -ms-grid-column and -ms-grid-row properties.

In the preceding example, we used px and fr units to specify the size of the columns and rows. Additionally, we can do so using standard length units (such as px or em), or the percentage of the element's width or height. Also, we can use the following keywords:

The following table lists the properties associated with the Grid layout:

Moreover, the Grid layout exposes a rich set of properties that allows you to easily cater to the changes in the view states and orientation of the app. We will discuss that later on when we get to the design of the app.

The second layout model we have is the Flexbox mode, another recent addition in CSS3. Similar to the Grid layout, the Flexbox layout is enabled using the display property and also requires a Microsoft-specific vendor prefix as it is still a World Wide Web Consortium (W3C) Working Draft. The Flexbox layout is used to make the relative position and the size of elements stay constant, even if the window sizes of the screen and browser change. Compared to floats, Flexbox provides a better and easier control on the position and size of elements. The advantage you have with Flexbox layout is that it enables relative positioning and dimensions of the elements inside it, since it considers the available space. This allows you to create a fluid layout that maintains the position and size of the elements relative to each other; hence, it enables the elements inside a Flexbox container to resize and reposition themselves when the dimensions of the browser or app window change. A Flexbox layout would be ideal for building apps that present any digital print media, such as a newspaper or a magazine.

As with the Grid layout, it is quite easy to create a container with a Flexbox layout by setting the display property to -ms-flexbox. After creating a Flexbox container, we can start manipulating the elements inside it, using the following properties: