<div class=”box j”>J</div>
</div></font>
</font>
CSS
复制代码
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
}
.b,.d,.g,.i {
background-color:red;
}
定义网格的关键代码：
复制代码
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px;
grid-template-rows: auto 10px auto;
}
在线案例
从示例效果中可以看出，
.wrapper容器通过
display:grid;定义成网格，并且使用
grid-template-columns:100px 10px 100px 10px 100px;和
grid-template-rows:auto 10px auto;指定了列宽、列间距，行高和行间距等。对应的子元素
.a、
.c、
.e、
.f、
.h和
.j列宽度为
100px(也就是黑色区域),而
.b、
.d、
.g和
.i是列与列的间距
10px(也就是红色区域)。而且当子元素在一行填不下时，就会自动换行，如
.f～
.j自动换到第二行显示。基于网格线的占位区
网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。基于上例，在容器
.wrapper下面有十个子元素
.a~
.j，接下来看如何通过基于网格线来实现各种在网格布局中的区域。对于网格线，在网格布局中有两种，一种是列线,另一种是行线。对应的个网格单元格都有列线起始线（
grid-column-start）、列线终止线(
grid-column-end)和行线起始线（
grid-row-start）、行线终止线（
grid-row-end）。
