<!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: grid lines</title> <link href="mailto:myst.dg@gmail.com" rel="author" title="Leo Deng" /> <link href="http://www.w3.org/TR/css-grid-1/#grid-line" rel="help" /> <link href="reference/grid-layout-basic-ref.xht" rel="match" /> <meta content="the subgrid 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: "left" 100px "center" 50px "right"; } .a { background: blue; grid-start: "left"; grid-end: "center"; } .b { background: yellow; grid-start: "center"; grid-end: "right"; } </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>