<style type="text/css">
.container { display:grid; grid-template-columns:100px 200px 300px; grid-template-rows:20px 40px; }
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>给父元素指明：
display:grid; 或 inline-grid。
grid-template-columns，跟多个数值（有几列有几个），表示各列的宽度，可使用 auto 表自动。也可用 fr 单位，比如：1fr 2fr 3fr，表示第 1 列占 1/6，第 2 列占 2/6，第 3 列占 3/6。
grid-template-rows，跟多个数值，表示各行的高度，通常不写表自动。
调试效果：
还可以使用 justify-content、align-content 属性，以实现内容元素的排布，
grid-row-gap、grid-column-gap、grid-gap 表间距。grid-gap 有两个参数：第 1 个是行与行之间的间距，第 2 个是列与列之间的间距。
跨行、跨列
跨行跨列，是写在子元素上的。
.box1 { grid-column-start:1; grid-column-end:3; }上述代码表示 box1 占据第 1、2 列，不包含第 3 列。
可简写为：
.box1 { grid-column:1 / 3; }或者：
.box1 { grid-column:1 / span 2; }grid-column-start、grid-column-end、grid-column 对应的还有：grid-row-start、grid-row-end、grid-row。
像表格还是像 float？
我们知道表格、float 都可实现网格的效果。
grid 其实更像是表格，比如某一单元格撑高后，整行都会变高。
