IE10 Platform Preview and CSS Features for Adaptive Layouts

The first platform preview of IE10 contains many new CSS3 features all developed as implementations of evolving Web standards. In this post, we’ll look at three of those CSS features—CSS3 Grid Layout, Flexible Box Layout, and Multi-column Layout. CSS Grid Layout and Flexible Box Layout both help developers create layouts for complex Web applications and Web sites. Multi-column is designed to help developers create advanced text layouts for improved readability on the Web. These three new CSS features can make it easier to more effectively use screen real-estate across a wide variety of devices and resolutions—a longstanding and growing problem for Web designers.
CSS3 Grid Layout

Let’s start with CSS Grid Layout (aka “Grid”), which is a proposal recently submitted by Microsoft to the CSS Working Group. The core idea behind Grid is to partition a Web page into a defined set of rows and columns, and then position and size elements based on those rows and columns, all using CSS. Because the size of rows and columns can be defined as fixed, flexible, or size-to-content, it’s easy to build a layout that completely fills the entire screen, regardless of screen size.

For example, the image below shows an exemplary game board which has been divided up into two columns and three rows, containing multiple elements. Some of the elements need to remain fixed, while others need to grow or shrink as the size of the browser window changes.

With Grid, you can achieve this design starting with the markup below.

Game Title

Score

Stats

Board

Controls

The div with ID “grid” is set as a grid container with display: grid, and the various rows and columns are defined as either flexible (that is, growing or shrinking based on available space) or auto-sizing, which sizes the row or column to the width or height of the largest element placed inside.

#grid {
display: -ms-grid;
-ms-grid-columns: auto 1fr;
-ms-grid-rows: auto 1fr auto;
}

Once the grid is defined, you can position individual elements to specific grid cells. As the markup below shows, not only can you specify that an element is placed at a specific row and column in CSS, but you can specify that an element should span multiple rows and/or columns, and specify an element’s horizontal or vertical alignment within a cell or range of cells. Elements can be specified as having a fixed size, or can be specified to fill the available width or height of the cell they’re placed in. In the example above, the “board” element grows along with the screen, while other elements, such as the “title” element, stay fixed in size. (Note that, because this is still an emerging specification, in IE10 usage, all of the grid properties below are prefixed with “-ms-”.)

#title { -ms-grid-column: 1; -ms-grid-row: 1 }
#score { -ms-grid-column: 1; -ms-grid-row: 3 }
#stats { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start }
#board { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-align: center }

By combining Grid with CSS3 Media Queries, you can specify entirely different layouts for different resolutions, aspect ratios, and screen orientations. For example, you can define a different number of rows or columns for different screen sizes (e.g. more columns for a vertical “portrait” layout, more columns for a horizontal “landscape” layout), or specify that rows and columns are sized differently. You can try this out for yourself with the Griddle test drive using the IE10 platform preview and resizing the window from wide to narrow width.

In addition, because the position of elements in a grid is independent of the order they are specified – that is, their position is specified purely by CSS rather than by their order in HTML markup – it’s easy to give elements different arrangements on different screen sizes, or even avoid displaying some elements entirely in some layouts. For example, you might want to skip displaying certain toolbars or sidebars on a small resolution designed for phones or tablets, where you might show a wider variety of content elements on a layout designed for a widescreen, high-resolution desktop screen. Most importantly, all these different effects are achieved purely with CSS – and because the visual display of content is entirely separated from the HTML, there’s no need to prepare a different HTML file for mobile vs. desktop devices.