CSS Grid 网格布局教程(3容器属性:grid-auto-columns 属性，grid-auto-rows 属性)

君山

3.8 grid-auto-columns 属性，grid-auto-rows 属性

有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

下面的例子里面，划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

1. .container {
   
2.   display: grid;
   
3.   grid-template-columns: 100px 100px 100px;
   
4.   grid-template-rows: 100px 100px 100px;
   
5.   grid-auto-rows: 50px;
   
6. }

复制代码

上面代码指定新增的行高统一为50px（原始的行高为100px）。