grid容器属性

⑴划分行和列

gird-template-rows

grid-template-columns

.content{
    display:gird;
    grid-template-columns:100px 100px 200px;//先按照列数排完再到行数
    gird-template-rows:200px 50px 100px;//所以这是三行三列的
    //当然，也可以给容器固定宽高，然后行高和列高给百分比
}

①repeat

重复写同样的值非常麻烦，可以使用repeat()函数，简化重复的值

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是重复的值

{
    display:grid;
    gird-template-columns:repeat(3,33.3%)//就是33.3%这个值重复三次
}

②auto-fill自动填充

单元格大小确定而容器大小不确定。每一行（每一列）容纳尽可能多的单元格，可以使用auto-fill关键字表示自动填充

{
    display:grid;
    gird-template-columns:repeat(auto-fill,200px)//就是33.3%这个值重复三次
}

③fr

表示比例关系。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

//与绝对长度的单位结合使用
{
    display:grid;
    gird-template-columns:150px 1fr 2fr;//第一列的宽度为150像素，第二列的宽度是第三列的一半
}

④minmax()

该函数产生一个长度范围，表示长度就在这个范围内。接收两个参数，分别为最小值和最大值

{
    display:grid;
    gird-template-columns:1fr 2fr minmax(100px 1fr);//列宽不小于100px，不大于1fr
}

⑤auto

由浏览器自己决定长度

{
    display:grid;
    gird-template-columns:100px auto 200px;
}

⑥网格线的名称

在gird-template-columns属性和grid-template-rows属性里面，可以使用方括号指定每一根网格线的名字，方便以后的引用

{
    display:grid;
    //网格布局为2行x3列，因此有三根水平网格线四根垂直网格线
    grid-template-columns:[c1] 100px [c2] 200px [c3] 50px [c4];
    gird-template-rows:[r1] 100px [r2] 50px;
}

⑵行间距和列间距

grid-row-gap设置行与行的间隔（行间距）

grid-column-gap设置列与列的间隔（列间距）

{
    display:grid;
    grid-row-gap:20px;
    grid-column-gap:50px;
    //grid-gap:<grid-row-gap><grid-column-gap>
}

最新标准，以上三个属性名的grid-前缀已经删除，row-gap,column-gap和gap

⑶grid-template-areas区域

一个区域由单个或多个单元格组成

{
	display:grid;
    grid-template-columns:100px 50px 200px;
    gird-template-rows:50px 100px;//两行三列
    gird-template-areas:'a b c'
        				'd e e'//把多个单元格合并成一个单元格
        				'g . i'//某些区域不需要利用则使用.表示
    
}

区域的命名会影响到网格线。每个区域的起始网格线会自动命名为区域名-start，终止网格线自动命名为区域名-end

⑷grid-auto-flow

划分网格以后，容器的子元素会按照顺序自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行再开始放入第二行。

{
	display:grid;
    grid-auto-flow:column;//先列后行，默认是row
    //row dense表示先行后列，而且尽可能紧密填满，尽量不出现空格
    //column dense表示先列后行，而且尽可能紧密填满，尽量不出现空格
}

⑸单元格内容位置

justify-items属性设置单元格内容的水平位置

align-items属性设置单元格内容的垂直位置

【取值都为：start、end、center、stretch】

place-items属性是align-items和justify-items的合并简写形式

⑹区域位置

justify-content属性是整个内容区域在容器里面的水平位置

align-content属性是整个内容区域的垂直位置

取值：start、end、center、stretch、space-between、space-around、space-evenly

place-content属性是align-content和justify-content的合并简写形式

⑺grid-auto-

grid-auto-columns和grid-auto-rows属性用来设置浏览器自动创建的多余网络的列宽和行高

grid项目属性

⑴指定项目位置

grid-column-start：左边框所在的垂直网格线

grid-column-end：右边框所在的垂直网格线

gird-row-start：上边框所在的水平网格线

grid-row-end：下边框所在的水平网格线

//简写分别是：grid-column,gird-row是这几个的简写形式

①span关键字

表示跨越，即左右边框（上下）边框之间跨越多少个网格

{
    grid-column-start:span 2;//表示该项目的左边框距离右边框跨越2个网格
}

⑵gird-area

该属性指定项目放在哪一个区域

{
    gird-ara:e;//该项目位于e区域
}

⑶单个项目的位置

justify-item：设置单元格内容的水平位置

align-item：设置单元格内容的垂直位置

【start、end、center、stretch】

place-self是这俩的简写