Hands On: CSS3 Grid Layout

This demo allows web designers to create rich layouts using CSS3 Grid Layout.

<div id="Grid" style="

display: -ms-grid;

-ms-grid-columns: 1fr 1fr 1fr 1fr;

-ms-grid-rows: 1fr 1fr 1fr 1fr;


<div id="Grid">


Fixed size
Add a column
Remove a column
Fixed size
Add a row
Remove a row
Add a grid item
Remove a grid item

9 by 9 grid:

A sample 9 by 9 grid, used as a starting point for
designs in various media


A typical 3-column layout, with fixed header, footer, and
sidebars but with variable-sized middle content area

A more interesting grid:

A sample 4 by 4 complex grid, with an inspiring colour

Very complex grid:

A even more complex grid, with a header and content
positioned in a modified 9 by 9 grid that groups together
content and related information

This demo allows you to create CSS3 Grid Layouts based on the W3C Working Draft of CSS3 Grid Layout.