首先要说明：grid 布局的兼容性一般，所以这个布局虽然极其方便且灵活，但仍然不是目前主流布局，所以还是将就 flex 一把梭。
grid 布局的特性：
-
grid 布局和 flex 一样主要分为容器 container 和内容 items，只需要在元素的样式中添加
display:grid;即可使用。 -
该布局不同于以往布局，该布局方式为将页面划分为多个区域，类似一个表格，所以编辑起来非常灵活。但是比较抽象，以我浅显的理解还无法做出条理清晰的总结。
grid 布局的相关属性：
-
grid-template-columns:和grid-template-rows:可以将页面分割为一个几行几列的表格，值的单位可以使用 px/vw/%/fr 等。（fr：将剩余空间平均分为“总 fr 数”份，每个以 fr 做单位的元素分得 n 份）。 -
grid-column(row)-start(end):N;N 为一个数字，可以指定赋予该属性的元素在分割出的表格里起（止）分别为表格中的第几条线。正因为这个属性，该布局方式才如此灵活。
-
grid-gap:可以设置 grid 元素间空隙的大小。 -
grid-template-areas:更加奇妙且灵活的分割方式，只需要取值输入多个字符串，便能将页面分割。 例：
.grid {
grid-template-areas:
"1 2 3 4 5"
"1 2 3 4 5"
"1 2 3 4 5";
}
便能将页面分割为三行五列的表格，选择区域"1"时，即选择字符串中所有带 1 的部分，即第一列,可以通过修改字符串内容，达到选择不规则形状区域的功能。
这个布局方式非常简便且强大，但是因为兼容性差，目前用到的不多，但还是有全面推广普及的可能的，所以这种抽象的布局方式，还是需要多多练习，最好是记住，以后真的用到了也好想起来。。。
