标签：自动 重复 单位 布局 min 交流 row none 网格
第一次使用Grid，仅供学习交流，大神勿喷~~
【网格容器部分】
一：【display】通过设置display属性为grid或者inline-grid创建一个网格容器。这样网格中的所有子元素就自动成为网格项目。
二：使用grid-template-rows和grid-template-columns属性设置网格的行和列：默认都是none;
grid-template-rows: 50px 40px; //设置了两行，第一行 行高50px，第二行 行高40px；
还可使用minmax()函数定义一个大概范围：grid-template-rows: minmax(50px, 100px) 40px; 表示：第一行 行高在50px~100px之间的任一随机值。
grid-template-columns使用同grid-template-rows一样。
三：【fr】grid新增单位，表示网格中所占的空间。类似flex布局中的flex：1；
四：【repeat()】用于创建重复的网格轨道。第一个参数：表示重复的次数；第二个参数表示没个尺寸；
Example：grid-template-rows: repeat(3, 1fr) 表示：创建三行网格，每一行行高1fr;
grid-template-columns: 30px repeat(3, 1fr) 30px; 表示：第一列的宽度30px，再重复创建三列，每一列的宽度为1fr，最后一列宽30px；
五：【间距】：可以设置任何非负值
grid-column-gap: 创建列与列之间的间距； grid-row-gap：创建行与行之间的间距；
grid-gap 同时设置两个值，如果只写一个则表示行与行，列与列之间的间距相等；
【网格项目部分】
待续……
标签：自动 重复 单位 布局 min 交流 row none 网格
原文地址：https://www.cnblogs.com/brand-code/p/10496498.html
