属性值的定义

如图，控制自动布局算法的工作方式

属性值的定义

使用grid-auto来定义隐式网格轨道

由于网格项过多从而自动增加的网格行，被称为隐式网格轨道，改变行高时，隐式网格轨道是不会发生改变的

https://zhuanlan.zhihu.com/p/33030746

自动布局算法

隐式网格轨道

grid-auto

grid-auto-clolumn | grid-auto-rows

指定自动生成的网格轨道(隐式网格轨道)的大小，不会控制非隐式网格轨道

grid-auto-flow 自动布局的方式

row （根据需要填加新行）| column （根据需要填加新列）| dense（自动）

grid

gris-teamplte-rows | grid-template-clomns | grids-temaplte-areas | grid-auto-row | grid-auto-columns | grid-auto-flow的简写

grid-auto 

属性值

row：告诉自动布局算法依次填充每行，根据需要添加新行

column:告诉自动布局算法依次填充每列，根据需要添加新列

dense:告诉自动布局算法，如果后面出现较小的grid item 则尝试在网格中填充空洞

grid-auot-flow

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

.container{

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

}

属性值<track-size>:可以是一个长度值，一个百分比值，或者一个自由空间的一部分(使用fr单位)

.container{

grid-auto-columns:<track-size>...;

grid-auto-rows:<track-size>...;

}

grid-auto -columns/grid-auto-rows

指定自动生成的网格轨道（又名隐式网格轨道）的大小

grid-auto-columns  /    grid-auto-rows

指定自动生成的网格轨道（又名隐式网格轨道）的大小

隐式网格轨道在显式的定位超出指定网格范围的行或列时被创建

grid-auto-flow：row/column/row dense/column dense;    控制自动布局算法的工作方式

row：从左到右一行一行依次填充每行

column：从上到下一列一列依次填充每列

dense：若后面出现较小的grid item，则尝试在网格中填充空洞，如内容放不下就在后面找一个能放下的网格单元放，把后面小的内容放到这个网格单元

grid-auto-columns/grid-auto-rows

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

grid-auto-flow

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

语法

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

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

grid-auto-columns / grid-auto-rows，指定自动生成网格轨道（隐式网格轨道）的大小。属性值可以是长度值、百分比、或自由空间一部分（fr）不过，不建议使用此功能。

grid-auto-flow_控制自动布局算法的工作方式。值：row、column、dense。