CSS基础语法

display: grid
gird-template-columns:

主要介绍grid-template-columns的主要作用

1.固定宽高值：

grid-tmeplate-columns:100px 150px 200px

这一行的意思就是将网格容器分割成三列，第一列为100px，第二列为150px，第三列为200px。

2.分数单位(fr):

 fr 是一个灵活的单位，代表网格容器剩余空间的一个比例份额。

grid-template-columns:1fr 2fr 1fr

这一行的意思就是均匀分割4份（1+2+1），第一列占一份，第二列占两份，第三列占一份。

3.auto值：

grid-template-columns:auto 100px

这一行的意思就是第一列根据内容来调整大小，第二列固定为100px。

4.repeat（）函数 ：

grid-template-columns:repeat(3,100px)

repeat意思重复，所以这个函数的意思就是重复3次，每一列为100px。相当于grid-template-columns:100px 100px 100px;

repeat也支持更复杂的操作：

grid-template-columns:repeat(2,1fr 2fr)

反正就是第一个数字代表重复几次，后面就是要重复的内。

5.minmax()函数：

定义列的最小宽度和最大宽度，确保就是在这个范围里面

grid-template-columns:minmax(100px,200px) 1fr

第一行的宽度范围在100px到200px之间，然后第二列占剩余的所有空间。

6.auto-fill和auto-fit：

跟repeat连用，用于自动创建列

grid-template-columns:repeat(auto-fill,minmax(100px,200px))

• auto-fit：尽可能多地创建列，使列填满容器的可用空间，如果有多余的空间，会将列拉伸以填充。
• auto-fill：尽可能多地创建列，但不会拉伸列来填充多余的空间。