Grid layout

Cascading Style Sheets, Level 3 (CSS3) Grid Layout ("the Grid") is new in Internet Explorer 10 and Windows apps using JavaScript. Like Flexbox, the Grid enables more layout fluidity than is possible with positioning using floats or script. It enables you to divide space for major regions of a webpage or web application, and to define the relationship between parts of an HTML control in terms of size, position, and layer. This removes the need to create a fixed layout, which cannot take advantage of available space within the browser window.

CSS3 Grid Layout is, as of this writing, still in development. The implementation of CSS3 Grid Layout in the current pre-release is based on the CSS Grid Layout module, which is currently a World Wide Web Consortium (W3C) Working Draft.

Because the Grid enables you to align elements into columns and rows but has no content structure, it also enables scenarios that are not possible with HTML tables. By using the Grid in conjunction with media queries, you can enable your layout to seamlessly adapt to changes in device form factor, orientation, available space, and more.

The Grid element

The basic building block of Grid Layout is the Grid element, which is declared by setting the display property of an element to either -ms-grid (for a block-level Grid element) or -ms-inline-grid (for an inline-level Grid element). (Because of the preliminary status of the Grid Layout draft, this value and all the properties in this section must be used with the Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows apps using JavaScript in Windows 8.) For instance, the following code example creates a Grid within the element that has an ID of "myGrid":

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>

Tracks (Columns and Rows)

After creating the Grid element, apply sizes to your columns and rows by using the following properties:

You can size columns and rows (collectively referred to as tracks) using any of the following:

• standard length units or a percentage of the object's width (for columns) or height (for rows)
• the auto keyword, indicating the width of the column or height of the row is sized based on the items inside of it
• the min-content keyword, indicating the minimum width or height of any child elements is used as the width or height
• the max-content keyword, indicating the maximum width or height of any child elements used as the width or height
• the minmax(a, b**)** keyword, indicating the width or height is between a and b, as available space allows
• fraction units (fr), indicating the available space should be divided among the columns or rows according to their fraction values, as illustrated in the following example

For an example of fraction units, consider the following expanded version of the "myGrid" ID selector:

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>

This Grid has four columns, and each column appears as described here:

• Column 1 (auto keyword): Column is fitted to the content in the column.
• Column 2 ("100px"): Column is 100 pixels wide.
• Column 3 ("1fr"): Column takes up one fraction unit of the remaining space.
• Column 4 ("2fr"): Column takes up two fraction units of the remaining space.

Because there are three total fraction units in this grid, Column 3 is allotted 1 fraction unit divided by 3 fraction units—or 1/3—of the remaining space. Column 4 is allotted 2/3 of the remaining space.

Similarly, this Grid has three rows, and each row appears as described here:

• Row 1 ("50px"): Row is 50 pixels tall.
• Row 2 ("5em"): Row is 5 ems tall.
• Row 3 (auto keyword): Row is fitted to the content in the row.

Repeating Grid tracks

If there are large number of columns or rows that are the same or exhibit a recurring pattern, a repeat syntax can be applied to define the columns or rows in a more compact form. The next two examples are equivalent. There is a single row, and a pattern of repetitive column tracks: a 250px column followed by a 10px gutter.

<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  } 

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>

Grid items

Child elements of the Grid are called Grid items, and are positioned using the following properties:

The tracks numbering system is a 1-based index, with 1 being the default. Given the Grid declared previously, consider the following two ID selectors:

#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Now, apply these selectors to the following markup:

<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>

You can view this page. (Internet Explorer 10 is required for this page to render correctly.)

Aligning Grid items

You can position Grid items along any of the edges of the cells formed by the columns and rows that the item spans using the following properties:

Modify the "item2" selector as follows (adding the last four lines):

#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

In addition, add the following selector:

#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

Now, apply these selectors to the following markup:

<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>

You can view this page. (Internet Explorer 10 is required for this page to render correctly.)

Stacking Grid items

You can stack Grid items by simply placing them in the same columns or rows. By default, an item that comes later in the markup will be drawn on top of items that come before it.

To demonstrate this, change the selector for Item 3 so that it is placed in column 2 and row 2, which is where Item 2 is located:

#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Because the div for Item 3 comes after the div for Item 2, Item 3 draws on top of Item 2. You can view this page. (Internet Explorer 10 is required for this page to render correctly.)

To override this default behavior, use the z-index property:

While the z-index property normally only applies to objects that have the position property not set to static, the z-index property applies to Grid items even when the position property is set to static.

In the selector for Item 3, assign a value of "-1" to the z-index property to push that item back in the stacking order:

#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

This makes Internet Explorer 10 draw Item 2 on top of Item 3. You can view this page. (Internet Explorer 10 is required for this page to render correctly.)

Spanning Grid items

You can make grid items span multiple columns or rows by using the following two properties:

In the selector for Item 3, assign a value of "4" to the -ms-grid-column-span property (and change the value of the -ms-grid-column property to "1") to cause it to span four column widths (all the columns):

#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

You can view this page. (Internet Explorer 10 is required for this page to render correctly.)

Be aware that if you attempt to span past the number of defined columns or rows in the Grid (for instance, in the previous example, if you leave the value of the -ms-grid-column property as "2" and set the -ms-grid-column-span property to "4", you have exceeded the number of defined columns by 1), another column or row is implicitly created and its width or height is set to auto (fit to content) for every column or row beyond the defined number.

API Reference

Grid Layout

Samples and tutorials

CSS Grid overlay sample

How to create an adaptive layout with CSS Grid

Design adaptive websites

Internet Explorer Test Drive demos

Hand On: CSS3 Grid Layout

The Grid System

Gridddle

IEBlog posts

IE10 Platform Preview and CSS Features for Adaptive Layouts

Specification

CSS Grid Layout