grid布局

grid布局属性：

创建一个grid容器：

display:grid;

grid-template:

grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

grid-template: <grid-template-rows> / <grid-template-columns>;

grid-template-columns:20% 30% 30% 20%;    //列相关宽度
grid-template-rows:40% 60%;               //行相关高度

grid-template-columns:100px auto;                 auto是剩余宽度
grid-template-rows:repeat(2,100px);               repeat是重复，参数1代表个数;

fr 单位允许你将一个轨道大小设置为网格容器内自由空间的一小部分。如下所示，每个网格项就会占据网格容器宽度的三分之一:
grid-template-columns: 1fr 1fr 1fr 50px;        //这里自由空间表示除去非弹性项以后剩余的空间。在此示例中的 fr 单位的可用空间表示减去50px以后的空间大小:

grid-column-gap和grid-row-gap:指定网格线的大小。你可以把它想像成在行/列之间设置间距宽度。

grid-column-gap: 10px;
grid-row-gap: 15px;

简写： grid-gap: 10px 15px;

justify-items

沿列轴对齐网格项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于容器内所有的网格项。

start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容处于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(默认值)

这也可以使用justify-self属性对各个子网格项进行设置。
justify-self:center;

align-items

沿行轴对齐网格项中的内容(相反于justify-item属性定义的沿列轴对齐)。此值适用于容器内所有的网格项。

start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容处于网格区域的中间位置
stretch: 内容高度占据整个网格区域空间(默认值)

这也可以使用align-self属性对各个网格项进行设置。
align-self:center;

place-items: center center;  这个属性是justify-content/align-items的简写，第一个值是align-items，第二个值是justify-content； 

justify-content
当你使用px这种非响应式的单位对你的网格项进行大小设置时，就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下，你就可以设置网格容器内网格的对齐方式。此属性会将网格沿列轴进行对齐(相反于align-content属性定义的沿行轴对齐)。

align-content
当你使用px这种非响应式的单位对你的网格项进行大小设置时，就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下，你就可以设置网格容器内网格的对齐方式。此属性会将网格沿行轴进行对齐(相反于justify-content属性定义的沿列轴对齐)。

start: 网格与网格容器的左端对齐
end: 网格与网格容器的右端对齐
center: 网格处于网格容器的中间
stretch: 调整网格项的大小，使其宽度填充整个网格容器
space-around: 在网格项之间设置偶数个空格间隙，其最边缘间隙大小为中间空格间隙大小的一半
space-between: 在网格项之间设置偶数个空格间隙，其最边缘不存在空格间隙
space-evenly: 在网格项之间设置偶数个空格间隙，同样适用于最边缘区域

place-content：center center;  （place-content 是设置 align-content 和 justify-content 的简写形式。）

父元素的终极简写：

 grid是下面所有这些CSS属性的缩写集合:grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow

 

grid子元素相关属性：

    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;

    表示纵向走第二列开始到第三列结束，横向走第一行开始到第三行结束的区间范围

    grid-column和grid-row
    grid-column和grid-row都是缩写，前者是grid-column-start / grid-column-end的缩写，后者是        
    grid-row-start / grid-row-end的缩写。
    例如：
    grid-column: 2 /4;
    grid-row: 1 /3;

    简写：
     grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
    如上可写成：grid-area:1/2/3/4;

justify-self表示单个网格元素的水平对齐方式。语法如下：

.item {
    justify-self: stretch | start | end | center;
}
其中（假设文档流方向没有变）：

stretch
默认值，拉伸。表现为水平填充。
start
表现为网格水平尺寸收缩为内容大小，同时沿着网格线左侧对齐显示。
end
表现为网格水平尺寸收缩为内容大小，同时沿着网格线右侧对齐显示。
center
表现为网格水平尺寸收缩为内容大小，同时在当前网格区域内部水平居中对齐显示。

 align-self指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐，语法如下：

.container {
    align-self: stretch | start | end | center;
}
其中（假设文档流方向为网页默认）：

stretch
默认值，拉伸。表现为垂直填充。
start
表现为网格垂直尺寸收缩为内容大小，同时沿着上网格线对齐显示。
end
表现为网格垂直尺寸收缩为内容大小，同时沿着下网格线对齐显示。
center
表现为网格垂直尺寸收缩为内容大小，同时在当前网格区域内部垂直居中对齐显示。

place-self可以让align-self和justify-self属性写在单个声明中。语法如下：

.container {
    place-self: <align-self> <justify-self>;
}
例如：
place-self:center center;

总结：

父元素简写：

grid-template: <grid-template-rows> / <grid-template-columns>; 
grid-gap: <grid-row-gap> <grid-column-gap>; 
place-items: <align-items> / <justify-items>; 
place-content: <align-content> / <justify-content>;
grid:grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow;

子元素简写：

grid-column:开始位置 /结束位置;
grid-row:开始位置 /结束位置;
grid-area:  <row-start> / <column-start> / <row-end> / <column-end>;
place-self:<align-self> / <justify-self>;