Grid 网格布局

1.前言

• 网格布局（Grid）是最强大的 CSS 布局方案，它将网页区域划分成一个个网格，做出各种各样的布局
• 网格通过指定列数和行数来控制，除了可以指定列宽和行高，还可以指定每个格子的跨列和跨行展示

2.基本使用

• 在父容器中设置 display: grid，然后设定列数和行数
• grid-template-columns：定义每一列的列宽，有几个值就表示有几列
• grid-template-rows：定义每一行的行高，有几个值就表示有几行

.container{
     margin: 50px auto;
     width:400px;
     height:400px;
     border: 1px solid #333333;

     display: grid;
     grid-template-columns: 50% 50%;
     grid-template-rows: 50% 50%;
}

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

效果：

3.单元格跨行跨列

• 通常时候一个格子对应一个元素，可以通过下面的属性给某个子元素设定起始位置和终点位置，通过它可以让一个元素占据多个格子

属性	说明
grid-column-start/grid-column-end	子元素的水平起始/终点位置
grid-column	水平位置简写，start / end
grid-row-start/grid-row-end	子元素的垂直起始起始/终点位置
grid-row	垂直位置简写，start / end

.container > div:nth-child(1){
        /* 水平方向占据2个格子 */
        grid-column: 1 / 3;
        /* 垂直方向占据2个格子 */
        grid-row: 1 / 3;

    }
.container > div:nth-child(2){
        /* 水平方向占据2个格子 */
        grid-column: 3 / 4;
        /* 垂直方向占据2个格子 */
        grid-row: 2 / 3;
}

• 设定了这个属性的子元素优先排列，其他子元素按剩余空间依次排列

4.列宽与行高

• 列宽与行高除了支持百分比和具体像素值，还支持一些列关键字
• fr：类似于flex布局的flex-grow属性，按比例占据容器的剩余空间

.container{
     margin-top: 50px;
     height:200px;
     display: grid;
     grid-template-columns: 100px 1fr 2fr;
     border: 1px solid #333333;
}

• auto：关键字表示由浏览器自己决定长度，具体表现为默认宽度由你内容撑开，如果容器有剩余空间，这自动分配剩余空间，但是fr优先级更高

.container{
    margin-top: 50px;
    height:200px;
    display: grid;
            
    grid-template-columns: 100px auto 200px;
    border: 1px solid #333333;
}

• minmax()函数：产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

.container{
    margin-top: 50px;
    height:200px;
    display: grid;
            
    /* 第1列最少100px，最大占据33% */
    grid-template-columns: minmax(100px, 1fr) 1fr 1fr;
    border: 1px solid #333333;
}

• repeat()函数：如果要设置成10列，20列甚至更多的列，而这些列都有相同的宽度，就要写很多遍重复的值，这时，可以使用repeat()函数，简化重复的值

.container{
   margin-top: 50px;
   height:200px;
   display: grid;
          
   grid-template-columns: 1fr 2fr 3fr 1fr 2fr 3fr;
   border: 1px solid #333333;
}

.container{
   margin-top: 50px;
   height:200px;
   display: grid;
   /* 和上面的写法等价 */           
   grid-template-columns: repeat(2,1fr 2fr 3fr);
   border: 1px solid #333333;
}

• 自动填充列数：使用auto-fill 关键字，这个关键字将自动换算成合适的重复此时.他将每一行（或每一列）容纳尽可能多的单元格

.container{
     margin-top: 50px;
     height:300px;
     display: grid;
            
     grid-template-columns: repeat(auto-fill,200px);
     grid-template-rows: 33% 33% 33%;
     border: 1px solid #333333;
}

5.设置行间距和列间距

• 通过下面的属性来设置行间距和列间距

属性	说明
row-gap	设置行间距
column-gap	设置列间距
gap	简写，同时设置行间距和列间距，如果只写一个，则表示2个值都一样

.container{
     margin-top: 50px;
     height:400px;
     display: grid;
            
     grid-template-columns: 1fr 1fr 1fr;
     gap: 10px 10px;
     grid-template-rows: 1fr 1fr 1fr;
     border: 1px solid #333333;
}