Grid 布局即网格布局
display:grid 或 display:inline-grid 来创建一个网格容器
grid-template-columns 属性和 grid-template-rows 属性
grid-template-columns 属性设置列宽,grid-template-rows 属性设置行高,这两个属性在 Grid 布局中尤为重要,它们的值是有多种多样的
1、 repeat() 函数:可以简化重复的值
2、auto-fill 关键字:表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格。例如:
grid-template-columns: repeat(auto-fill, 200px);
3、fr 关键字:Grid
布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr
单位代表网格容器中可用空间的一等份。grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为
200px,后面剩余的宽度分为两部分,宽度分别为剩余宽度的 1/3 和 2/3。 例如:grid-template-columns:
200px 1fr 2fr;
4、minmax() 函数:我们有时候想给网格元素一个最小和最大的尺寸,minmax() 函数产生一个长度范围,表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数,分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是,第三个列宽最少也是要 300px,但是最大不能大于第一第