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.
<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: 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.
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 >
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; }
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; }
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 >
#beagleContent { column-count: 3; }
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