grid布局实战

1、grid布局两端对齐,最后一行左对齐。

display: grid;
// grid-template-columns: 1fr 1fr 1fr 1fr;

// 简写：
grid-template-columns: repeat(4, 1fr);
gap: 30px;

 2、响应式布局：auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数，minmax最小值255px、最大值1fr代表剩余空间的比例。

display: grid;
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
gap: 30px;

3、grid-row和grid-column可以控制某个元素占领几份

以grid-row行为例，从第几列开始 / 第几列+想占几个；

.layout .box1{
    grid-row: 1/3;
    grid-column: 1/3;
}

 4、取值类型拓展：百分比、fr单位、repeat()函数、auto-fill 关键字、minmax() 函数、auto 关键字

• 百分比：是比较常用的单位，参照与容器的大小
• fr单位：Grid 布局引入了一个另外的长度单位来帮助我们创建灵活的网格轨道，fr关键字代表网格容器中可用空间的一等份。下面例子中表示容器分成4份，第一列和第二列各占一份空间，第三列占两份空间。
• repeat()函数：该函数接收两个参数，第一个参数为重复次数，第二个参数为需要重复的值，使用repeat函数可以简化重复的值，
• auto-fill 关键字：单元格大小固定但容器大小不确定时，可以使用auto-fill关键字进行自动填充，让一行或者一列尽可能多的容纳单元格，常搭配repeat()函数中使用。
• minmax()函数:minmax()函数产生一个长度范围，接收两个参数，第一个参数为最小值，第二个为最大值。
• auto关键字:auto关键字表示由浏览器自己决定长度,下面代码中第一列为容器的30%宽，第二列是50px，第三轮由浏览器自适应。

grid-template-columns: 25% 25% 25% 25%;
grid-template-columns: 1fr 1fr 2fr;
grid-template-columns: repeat(5, 1fr);//第一个参数可以是具体值也可以是auto-fill关键字，后面可以写绝对单位，百分比，fr，minmax()函数
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: 200px 20% minmax(100px,1fr);
grid-template-columns: 200px auto 200px;
grid-template-columns: repeat(3, 50px [col-start]);//携带网格线名字
grid-template-columns: repeat(2, 100px 20px 80px);//重复某种模式
grid-template-columns: 30% 50px auto;