4 合并grid列_grid布局笔记8——grid-auto-columns、grid-auto-rows

有时候，因为特殊的需要，我们需要在现有网格的外部放置一些项目，或者我们设置了好了网格，例如3行3列，但是项目有10个，那么多余的项目或者现有网格外部的项目的列宽和行高是多少呢？

grid-auto-columns属性设置多余网格的列宽，grid-auto-rows属性设置多余网格的行高。

第一种情况，项目数目超过设置单元格数量，浏览器自动放置多余项目

这种自动放置和grid-auto-flow的设置有关，如果grid-auto-flow取值为row或者row dense，我们设置3行3列的网格。多余项目是这样放置的——

多余的项目会另起一行放置，这个时候多余项目的宽度grid-template-columns设置的行高一致(例如上图的10项也是属于第一列的，宽度就是第一列的列宽)，所以我们设置grid-auto-columns属性是没有效果的，这个时候我们只能设置多余项目的行高——grid-auto-rows，下面我们设置多余行高为200px

grid-auto-rows&