Grid网格布局

---

• grid-template-columns：定义每一列的列宽

1. 可以使用repeat()

repeat(3, 33.33%)，定义三列，每一列为33.33%宽  

repeat(2, 100px 20px 80px)，定义了六列，第1列和第4列为100px，第二列和第5列为20px…  

repeat(auto-fill, 100px)，表示不固定大小的容器，希望一行尽量放慢项目，每个项目为100px

2. 还可以使用fr，比例关系，100px 1fr 2fr，第一列为100px，剩余部分分为3份，第二列占2份，第三列占1份。

3. 1fr 1fr minmax(100px, 1fr)，容器宽度为280px时，此时三列每个都100px，则不够，所以就最后一个为100px，剩余部分前两个平分；

1fr  **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源	徽信搜索公众号【编程进阶路】** 1fr minmax(100px, 200px)如果容器宽度为400px时&#