| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title>CSS Grid Layout: display: grid</title> |
| <link rel="author" title="swain" href="mailto:swainet@126.com"/> |
| <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 --> |
| <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/> |
| <link rel="match" href="../reference/display-grid-ref.html"> |
| <meta name="assert" content="'display: grid' causes an element to generate a block-level grid container box."/> |
| <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> |
