grid布局（一）
知有
204
grid布局
grid-template-*：
这个包括grid-template-columns和grid-template-rows两个属性。
grid-template-columns用来定义列，定义使用示例：
grid-template-columns：100px 100px 100px;定义了三个宽为100px的列。
grid-template-rows用来定义行，使用方法和定义列一样。
和grid-template-*相关的属性：
repeat():
repeat()有两个值，第一个值是用来定义重复的次数，第二个参数用来定义重复的值。
使用方法：
如之前的grid-template-columns：100px 100px 100px;就可以用repeat()实现，如grid-template-columns：repeat(3,100px);
auto-fill:
这个属性就是自动填充，grid-template-columns：repeat(auto-fill,100px);就是列100px自动填充满盒子。
fr:
方便比例关系，如grid-template-columns：repeat(4,1fr);就是将盒子的宽度平均分为4份。
minmax()：
产生一个长度范围，有两个值，分别是最大值和最小值，就是定义一列的宽度的范围。
aout：
aout表示自动决定一列的宽度，如果将一列的宽设为aout浏览器就会自动决定它的宽度。