css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。
比如我们要达到下面这样一个效果要怎么做？
图中有16个元素，我们要其自适应宽度，按照我们以前的想法肯定是直接通过media，媒体查询来完成这个，但是代码肯定不会简洁，但是我们通过grid 布局只需要几行代码!
代码长这样：
CSS：
#container {
display:
grid;
grid-gap:
1em;
grid-template-columns:
repeat(
auto-fill,
minmax(
200px,
1fr) ) ;
}
#container >
div {
background-color:
skyblue;
height:
200px;
}
HTML：
<
div
id=
"container"
>
<
div
>1
</
div
>
<
div
>2
</
div
>
<
div
>3
</
div
>
<
div
>4
</
div
>
<
div
>5
</
div
>
<
div
>6
</
div
>
<
div
>7
</
div
>
<
div
>8
</
div
>
<
div
>9
</
div
>
<
div
>10
</
div
>
<
div
>11
</
div
>
<
div
>12
</
div
>
<
div
>13
</
div
>
<
div
>14
</
div
>
<
div
>15
</
div
>
<
div
>16
</
div
>
</
div
>
container的CSS代码display: grid;，基础代码，将container的布局设置为网格布局。
第二句 grid-gap: 1em;是简写： grid-column-gap 和 grid-row-gap的简写，顾名思义就是行与行 列与列之间的间距。
第三局 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr) ) ;。是显示网格属性，我们可以用此属性来代替flex布局，暂且记住就是处理列的，将一整行分割为多少列，可以使用这个，这句代码的意思是，一行里面所划分多少个单元格的是自适应的（auto-fill），宽度怎么来定，minmax就是最小值和最大值的写到一起的并称，最小值是200px，最大值是 1fr, fr是什么，是css grid一个新的单位，就可以理解为，将目前水平或者垂直宽度分成多少份的距离，这里1fr 就是container水平宽度/1的距离了，也就是父元素最大宽度了,但是我们是不能直接将一个元素比如第三个div设置一个宽度，然后你会想到后面的就挤下去了，而是需要给第三个div设置 grid-column: auto / span 2 【这一句代码就是当前单元格 从任意列开始，将跨2个单元格，水平占据2个单元格的空间，span就有跨越跨度的意思，这和表格里面的colspan是类似的】。
------------------------------------
好，我们开始，如何画格子？！
.container {
display:
grid;
grid-template-columns:
100px
100px
100px;
grid-row-gap:
1em;
grid-column-gap:
2em;
}
效果是这样：
容器这样设置样式，设置grid-template-columns为3个100px，表示该container下面一行有三列，至于有多少行可以通过 grid-template-rows来设置，比如我们添加下面的css。
grid-template-rows:
100px
200px
300px;
变成了下面这样：
上面的代码我可以优化一下，通过, 来改成下面这样：
grid-template-columns:
repeat(
3,
100px);
实际上这个就等于 100px 重复三次。
重点！！！！
但是grid-template-columns 和repeat经常配合起来使用，就比如文章开头提到的那个效果实现。下面列举了一下常见的用法：
/** 模拟flex布局 将一行分成3列，占比为1：2：1 */
/* grid-template-columns: 1fr 2fr 1fr; */
/** 模拟flex布局 第一列200px 剩余的空间分成2等份，占比为1：2 */
/* grid-template-columns: 200px 1fr 2fr; */
/** 格子自适应排列，每一列的宽度最小200px，最大剩余可用宽度 */
grid-template-columns:
repeat(
auto-fill,
minmax(
200px,
1fr)) ;
/** 自适应按照每个格子210px等分 */
/* grid-template-columns: repeat(auto-fill, 210px); */
/** 第一列和最后一列20px 中间剩余空间分成6分【设置了这个，就不要设置grid-item的最大最小宽度，不然显示错乱，自行尝试】 */
/* grid-template-columns: 20px repeat(6, 1fr) 20px; */
/** 每一行分成6等份，实际就等于grid-template-columes: 1fr 1fr 1fr 1fr 1fr 1fr*/
/* grid-template-columns: repeat(6, 1fr); */
/*** 每一行分成5等份，每一等份分成2份，占比是1:2 */
/* grid-template-columns: repeat(5, 1fr 2fr); */
我们先把grid-template-rows设置为3个100px, 或者将cell div高度设置为100px，然后让第四个div跨两行，可以像下面这样写：
grid-column-start:
1;
grid-column-end
:
3
;
/**方法二*/
grid-column: 1 /
3
;
/**方法三*/
grid-column: 1 / span
2
;
/**方法一二三有同样的效果*/
最后的效果是这样：
如果你想使用grid布局做出更加酷的效果，你也许需要了解一下
你也可以点击和来查看本文的demo html文件，里面会有一些其他小的扩展。
但是更多的需要自己去探索！
参考：
