<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Grid Layout Test: basic</title> <link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" /> <link href="http://www.w3.org/TR/css-grid-1/#track-sizing" rel="help" /> <link href="reference/grid-layout-basic-ref.xht" rel="match" /> <meta content="the layout should behave the same as reference." name="assert" /> <style> body { margin: 0; padding: 0; } #caseTitle { margin: 10px; height: 40px; } #grid { width: 150px; background: #eee; display: grid; grid-definition-columns: 100px 50px; } .a { background: blue; grid-column: 1; grid-row: 1; } .b { background: yellow; grid-column: 2; grid-row: 1; } </style> </head> <body> <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> <div id="grid"> <div class="a"> </div> <div class="b"> </div> </div> </body></html>