定义了网格以后，如果没有特别设置网格项目在网格里的尺寸还有位置，网格会有一套规则自动排版它的网格项目。

比如现在这个网格容器里有六个项目，把这个网格划分成三列，没有特别设置项目的尺寸还有位置，这网格里的这些项目会自动排版，因为网格有三列，所以每行会显示三个项目，排完一行以后，剩下的项目会排在第二行。虽然没有明确地定义网格的行，网格根据需要自动创建了需要的行。

grid-auto-flow

用 grid-auto-flow 可以控制这种自动排版的算法，在这个 grid 容器里把 grid-auto-flow 设置成 column，你会发现所有项目都会自动排到网格栏上，它会自动创建需要的栏。再把这个属性的值设置成 row ，现在网格会自动创建行，然后在新的行里排版网格项目。

grid-auto-rows

如果你想控制这些自动创建的行的尺寸，可以使用 grid-auto-rows 这个属性，在 gird 容器里用一下这个样式属性，默认它的值是 auto，表示自动设置自动生成的行的尺寸。

grid-auto-rows 属性的值可以是一些具体的长度值，如果只提供一个长度值，所有自动生成的行都会使用这个尺寸，比如 100px，现在所有自动生成的行的高度都会是 100px，后面再给它添加一个值，比如 150 像素，排在第一行的高度是 100 像素，第二行的高度就会是 150 像素，如果有第三行，它的高度应该是 100 像素，第四行是 150 像素。后面都会使用这种模式继续设置自动行的高度。

grid-template-rows

下面再试一下把 grid-template-columns 换成 grid-template-rows，在网格容器里定义三个行。 然后把 grid-auto-flow 设置成 column。现在项目会排在两个列里，左边这列里面有 1，2，3，右边这列里面是 4，5，6。

grid-auto-columns

控制自动生成的列的尺寸，可以使用 grid-auto-columns，第一列的宽度是 100 像素，第二列可以设置成 1fr。现在网格第一列的宽度会是 100 像素，网格容器里的剩余的空间会交给第二列。