<!DOCTYPE html> <html><head> <title>CSS Grid Layout: display: grid</title> <link href="mailto:swainet@126.com" rel="author" title="swain"> <link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen"> <!-- 2013-09-17 --> <link href="http://www.w3.org/TR/css-grid-1/#grid-containers" rel="help"> <link href="reference/display-grid-ref.htm" rel="match"> <meta content="'display: grid' causes an element to generate a block-level grid container box." name="assert"> <style type="text/css"> #container { position:relative; width:400px; height:100px; } #grid { display:grid; grid-template-columns:100px 300px; grid-template-rows:70px 30px; height:100%; } #cell1 { grid-column:1; grid-row:1; background-color:green; height:70px; } #cell2 { grid-column:2; grid-row:1; background-color:limegreen; height:70px; } #cell3 { grid-column:1; grid-row:2; background-color:limegreen; height:30px; } #cell4 { grid-column:2; grid-row:2; background-color:green; height:30px; } .error { position:absolute; top:0; left:0; height:100%; width:100%; z-index:-1; } #table { width:100%; height:100%; border-collapse:collapse; } #table td { padding:0; vertical-align:top; } #table td:first-child { width:100px; } #table tr:last-child td { height:30px; } </style> </head> <body> <p>Test passes if there are 4 green rectangles and no red.</p> <div id="container"> <div id="grid"> <div id="cell1">cell1</div> <div id="cell2">cell2</div> <div id="cell3">cell3</div> <div id="cell4">cell4</div> </div> <div class="error"> <table id="table"> <tbody> <tr> <td style="background-color:#f00">cell1</td> <td style="background-color:#e00">cell2</td> </tr> <tr> <td style="background-color:#e00">cell3</td> <td style="background-color:#f00">cell4</td> </tr> </tbody> </table> </div> </div> </body></html>