网格布局Grid
Flexbox 用于设计横向或纵向的布局，而 Grid 布局则被设计用于同时在两个维度上把元素按行和列排列整齐。
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
行和列的交叉区域，称为"单元格"（cell）。 一个网格通常具有许多的列（column） 与 行（row） ，以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter） 。
此图来自MDN - 网格
设置display:grid
display: grid指定一个容器采用网格布局。
该布局两个属性定义了一些行和列的轨道。
-
行（gird-template-rows）
-
列（grid-template-colums）
为了节省地方，我把这边的样式改了一点，但是不影响。
代码如下：
#box_gird {
display: grid;/* 设置为网格布局 */
grid-template-columns: 100px 100px 100px; /* 列宽 第一、第二、第三列列宽均为100px */
grid-template-rows: 100px 100px 100px;/* 第一行、第二行、第三行行高为100px */
gap: 10px 20px; /* 行间距为10px，列间距为20px */
text-align: center;
}
#one,#five,#nine {
background-color: red;
}
#two,#four,#eight {
background-color: rebeccapurple;
}
#three,#six,#seven {
background-color: yellow;
}
<span>header</span>
<div id="box_gird">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7/div>
<div id="eight">8</div>
<div id="nine">9</div>
</div>
<span>footer</span>
可以看到这边的间距 gap: 10px 20px; 其实没有计算最顶部和最底部之间的间距，是把整个容器占满了的。
这边一整个大盒子 wrapper ，称之为 容器。
而每一个 “ 1, 2, 3... ” 称之为 项目 。
默认情况下，容器的元素均为块级元素显示，但也可以使用 display: inline-grid; 转为行内元素。
设置好之后，为上图效果。
注意，设为网格布局以后，容器子元素（项目）的
float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
grid-template-columns 属性， grid-template-rows 属性
grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
上述代码已有表示，请查看css代码。除了用px单位之外，还可以用百分比
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
参考链接:
