有時候，因為特殊的需要，我們需要在現有網格的外部放置一些項目，或者我們設置了好了網格，例如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：200px

如果grid-auto-flow取值為column或者column dense，那麼多餘項目的放置是這樣的——

多餘的項目另起一列放置，而多餘項目的高度是和grid-template-rows設置的行高一致，這時設置grid-auto-rows屬性是沒有效果的，我們只能設置grid-auto-columns屬性。（如果不設置，多餘項目的寬度會佔據容器多餘的寬度（容器寬度減去設置好的網格寬度））。下面設置grid-auto-columns：200px

grid-auto-columns：200px

第二種情況多餘的項目或者放置在網格外面的項目的位置在設定的行列之外（例如設定是3行3列的網格，現在要求項目放置在帝4列第4行的位置。）

這個時候，設置多餘的行高、列寬都是有效的（沒有設置的話瀏覽器會自動決定（根據單元格內容的大小））因為，第4行的高度和第4類的寬度都是沒有設置的。下面我們設置10項放置在第4行，第4類。

 class="item"
 style="
 background: rgb(208 228 167);
 grid-column-start: 4;
 grid-row-start: 4;
 "
>
10

然後設置grid-auto-columns：200px和grid-auto-rows：200px，然後我們可以看到

明顯，當設置了10項的位置，容器網格自動變為了4行4列，而第4列的寬度是grid-auto-columns屬性設置的值，第4列的高度是grid-auto-rows屬性設置的值。

最後簡單介紹一下grid-template 屬性，grid 屬性。grid-template屬性是grid-template-columns、grid-template-rows和grid-template-areas這三個屬性的合併簡寫形式。grid屬性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow這六個屬性的合併簡寫形式。但是使用這兩個屬性書寫，並不容易，而且代碼不容易閱讀。要斟酌使用（建議不要使用。）

以上就是筆記8的所有內容。