grid-level-01/example004.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Grid Example 4 (20151104 ED)</title>
<link type="text/css" rel="stylesheet" href="_baseline.css">
<style type="text/css">
#grid {height: 15em; width: 50%;}
#grid div {border: 1px dotted red;}
#grid div[id]::before {content: "[#" attr(id) "] ";}
</style>
<style type="text/css" class="show">
#grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* two columns */
    grid-template-rows: 50px 1fr 50px /* three rows  */
  }
</style>
</head>
<body>


<div id="grid">
	<div id="d01"></div>
	<div id="d02"></div>
	<div id="d03"></div>
	<div id="d04"></div>
	<div id="d05"></div>
	<div id="d06"></div>
</div>


<section id="reference">

<p>Reference rendering, in terms of sizing (note <code>1fr</code> areas may be a different width or height than the above):</p>
<img src="refrends/example004.png" alt="">

</section>

</body>
</html>