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.

Illustration of desired grid-based page layout

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

<div id="grid">
    <div id="title">Game Title</div>
    <div id="score">Score</div>
    <div id="stats">Stats</div>
    <div id="board">Board</div>
    <div id="controls">Controls</div>
</div>

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: 3; -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.

CSS3 Flexible Box Layout

Grid is great for adaptive layout, but it’s not the only option available. In the IE10 platform preview developers can also use Flexible Box Layout (aka “Flexbox”) to lay out elements in a fluid, source-independent way. Flexbox and Grid share many common aspects – elements are placed inside of a parent container, and their size and position are adjusted depending on the parent size. The key difference between Flexbox and Grid is that Flexbox lays out its content along a single axis (vertical or horizontal) whereas grid can lay out content in both rows and columns. Also, the default behavior of Flexbox is to “stack” elements along one side of the container, whereas the default behavior of Grid is to place elements “on top” of each other in row 1, column 1.

While many behaviors that can be achieved with Flexbox are also possible with Grid, and vice versa, Flexbox is best suited for creating individual components and collections (e.g. toolbars, image collections) while Grid is designed for creating full-page layouts, and for components where individual elements overlap.

The basics of using Flexbox are straightforward. The example below starts with three buttons (individual components of a basic media toolbar) laid out in a containing div. By default, these buttons are laid out with display: inline-block, which means that they have an intrinsic size that does not change as the container size changes. This can lead to unused white space where the layout does not adapt to the available space.

<div id="playControl">
    <button>Back</button>
    <button>Play</button>
    <button>Forward</button>
</div >

Illustration of three buttons laid out without flexbox
Result of markup above

With flexible box layout (i.e. display: box) you can specify that the button container will lay out its children such that each child element has an equal share of the available space in the container. Now the buttons fill the container completely, and will do so regardless of how the container size changes. This is an approach that works well with flexible grid cells – if the outer container is a div that is sized to fill a flexible grid cell, then not only does the overall layout adapt as the screen size changes, but the individual toolbar changes as well.

#playControl { display: -ms-box; }
button { -ms-box-flex: 1; }

Illustration of three buttons laid out with flexbox
Result of markup above

Another useful feature of Flexbox is the ability to act as a container for an arbitrary number of items, especially using the box-lines property. Specifically, a container element (such as a div) with display: box; set will automatically stack elements in that container towards one side of the container (the left side of the container, for most Western languages). If the box-lines property is set to multiple, then a Flexbox container will arrange content elements in multiple rows of content, if vertical space allows. This means that a flexible container element can automatically arrange its contents to make the best use of space, without the designer having to know how many items are in the container and having to explicitly place each item.

In the example images below, the same five items are arranged in a single row when the container is wide enough, but a second row of items is created beneath the first when the container is too narrow. This approach can be used when a dynamic data query has returned an unknown number of items, and you want to display them in a simple, straightforward way.

<div id="collectionContainer">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div >

#collectionContainer { -ms-box-lines: multiple; }

Illustration of 5 divs side-by-side without wrap

Illustration of 5 divs side-by-side with wrap

CSS3 Multi-column Layout

Finally, you can use CSS Multi-column layout to arrange content into multiple columns on the page. This approach is used by newspapers and magazines in the print world, which makes text easier to read and track from line to line by organizing the content into multiple parallel columns.

Multi-column layout allows you to do that with a few lines of CSS. For example, the content in the image below can be quickly organized into 3 columns by placing the line “column-count:3” on the containing div.

<div id="beagleContent">
    <img src="3Beagles.jpg" style="float: right">
    Lorem ipsum...
</div >

Illustration of single column layout

#beagleContent { column-count: 3; }

Illustration of multi-column layout

Multi-column layout offers a wide variety of options to specify how your content is laid out, including the ability to set a fixed column count, a minimum column width, the size of the gap between columns, and even column rules, which are decorative borders between columns. Multi-column layout also provides the ability to specify where column breaks should occur, and to have content automatically balanced between columns, so all columns are the same length. Also, note that because Multi-column is a W3C Candidate Recommendation, no -ms- tag is needed when using these properties. You can try an example of CSS3 multi-column layout using the IE10 platform preview and other browsers.

Your Feedback

We’re excited to have CSS3 Grid, Flexbox and Multi-column in the IE10 platform preview so developers can learn, experiment, and provide feedback. We will continue to work with the Web community and the W3C CSS working group on the CSS Grid and other specifications and submit accompanying test cases. Together we can make CSS3 adaptive layouts another dependable part of the interoperable Web platform.

—Chris Jones, Program Manager