self

justify-self

--设置行轴方向的对齐方式

语法

justify-self: start | end | center | stretch;

align-self

--设置列轴方向的对齐方式

align-self:start | end | center | stretch;

grid-area

--给grid item 进行命名以便于使用grid-template-areas属性创建模版时来进行引用

语法

grid-area:<name> | <row-start> / <column-start> /  <row-end> / <column-end>;

参数说明

<name>:grid-template-areas中定义的命名。

<row-start> / <column-start> /  <row-end> / <column-end>:可以是数字，也可以是网格线的名字。

简写start-end

grid-column/row-start/end

--使用特定的网格线确定grid item在网格内的位置

参数说明

<line>:可以是一个数字来指定相应编号的网格线，也可使用名称指代相应命名的网格线

span <number>:网格项将跨越指定数量的网格轨道

span <name>:网格项将跨越一些轨道，直到碰到指定命名的网格线，必须结合start使用才有效，单独使用无效。

auto:自动布局，或则自动跨越，或则跨越一个默认的轨道

注意

1，如果没有声明grid-column-end/grid-row-end,默认情况下，该网格项将跨越1个轨道。

2，网格项可以相互重叠，可以直接使用z-index来控制它们的堆叠顺序

minmax()

--定义了一个长宽范围的闭区间

语法

minmax([<length> | <percentage> | <flex> | min-content | max-content | auto | ],[<length> | <percentage> | <flex> | min-content | max-content | auto);

参数说明

flex:单位为fr的非负维度，指定轨道弹性布局的系数值。

min-content:自适应内容最大的那个单元格

max-content:自适应内容最小的那个单元格

auto:作为最大值，等价于max-content.作为最小值时，它表示轨道中单元格最小宽度（由min-width/min-height）的最大值。

fit-content()

--根据公式Min(最大大小，最大值（最小大小，参数）)将给定大小夹紧为可用大小

语法

grid-template-columns:fit-content(<length> | <percentage>);

grid-template-rows:fit-content(<length> | <percentage>);

repeat()

--跟踪列表的重复片段，允许大量显示重复模式的列或行以更紧凑的形式编写

语法

grid-template-columns:repeat(repeat,values);

grid-template-rows:repeat(repeat,values);

参数说明

repeat:<number> | auto-fill | auto-fit

number:列的宽度或行的高度，可以为fr,px,%，max-content,min-content,auto等

auto-fill:以网格项为准自动填充，即当宽度够时，自动在列上填充空的单元格。

auto-fit:以网格容器为准自动填充。

注意

1，auto-fill和auto-fit必须结合minmax()使用才生效，具体数值是无效的。

    例：repeat(auto-fill,minmax(100px,300px));

2，只适用于grid-template-columns和grid-template-rows

repeat的混合写法

grid-auto-columns/grid-auto-rows

--指定自动生成的网络轨道（又名隐式网络轨道）的大小，即当我们创建的行或列不够时，自动填充行或列的即是隐式网络轨道。

grid-auto-flow

--控制自动布局算法的工作方式

语法

grid-auto-flow:row | column | row dense | column dense; 

(不建议使用，因为不好控制)

1,justify-content

--设置网格容器内的所有网格沿着行轴的对齐方式

语法

justify-content: start |end |center | stretch |space-around | space-between | space-evenly;

2，align-content

--设置网格容器内所有网格在列轴上的对齐方式

语法

align-content: start | end | stretch | space-around（单元格与单元格之间的间隙是两端间隙的两倍） | space-between | space-evenly(两端的间隙和单元格与单元格之间的间隙一样)

简写

3，place-content

语法

place-content:<align-content> <justify-content>;

1,justify-items

--沿着行轴对齐网格内的内容

语法

justify-items: start | end | center | stretch(默认值);

2,align-items

--沿着列轴对齐网格内的内容

语法

align-items:start | end | center | stretch(默认值);

3,place-items

语法

place-items:<align-items> <justify-items>;

grid-column-gap/grid-row-gap

--指定网格线的大小，可以想象为设置列/行之间的宽度。

简写

grid-gap: <grid-row-gap>  <grid-column-gap >;不过逐渐可以使用gap简写来替代grid-gap，如果兼容IE，最好两个都写上。

grid-template简写例子

repeat() 只能用在已有的元素上

grid-template简写属性

属性值

1:<none>将三个属性都设置为其初始值

2:<subgrid >把grid-template-rows和grid-template-columns设置为subgrid，并且grid-template-areas设置为初始值（即一个单元格的大小）

3:<grid-template-rows/grid-template-columns>把grid-template-rows和grid-template-columns设置为指定值，于此同时，设置grid-template-areas为none