HTML5 grid布局

今天学习到了grid布局

感觉跟flex布局差不多，如果flex布局学懂了这个grid就是换汤不换药哈哈哈
grid的属性：

grid-template-columns:100px 10% 1fr 2fr; /*写几个值表示有几列   值可以是px这种固定大小的，也可以是百分比，也可以使用fr这种单位；fr表示总空间减去固定空间和百分比的大小，然后再分配*/
grid-template-columns: [c1] 200px [c2] 200px [c3] 1fr [c4];/*这里的[]是在给网格线起名字，每个网格线可以有多个名字，用空格隔开就OK，在后面会说到网格线名字的作用*/
grid-template-columns:repeat(12 1fr);    /*这个repeat是重复的意思，也就是我们创建了12个大小相等的列*/
grid-template-columns: repeat(auto-fit, 100px);    /*auto-fit 自适应的意思，也就是说尽可能的每块100px填满网格容器*/
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));/*上面的这种repeat(auto-fit, 100px)在响应式布局中可能因为不到100像素然后产生留白，所以我们用minmax()来解决，我们用minmax(100px, 1fr)来代替100px   minmax() 函数定义大于或等于 min 且小于或等于 max 的大小范围*/

还有就是一般i标签为啥会存放小图标，搞不懂九敏