當瞭解完網格容器的屬性後，接下來要進入網格項目的部分，如果你還不了解什麼是網格容器及網格環境，可以回顧地ˊ十七天Grid 基本認識及第十八天Grid 網格容器

.container {
    display: grid | inline-grid;
}

在網格容器篇有提到當我們對 container 宣告 display: grid 或 inline-grid 時，container 便會成為網格容器，而其子層 item 會成為網格項目，接下來我們會針對網格項目的部分做介紹

網格項目特性

1. 網格項目在網格區域內就如同區塊及排版，可以使用 margin、padding、border 來調整範圍，所以也可以使用 margin:auto 來置中。
2. 大部分都還 flexbox 類似：
   • 項目如果沒有設定寬高，height 和 width 預設因為都是 auto，所以會拉伸到符合網格區域的範圍。
   • float 和 clear 對網格項目沒有效果。
   • verticle-align 除了影響網格項目中的文字高度及對齊方式外，對網格項目本身沒有任何作用。
   • 網格項目如果設定為 position:absolute | fixed 其中一種時，就會脫離網格容器。
3. 比較特別的是在設定網格項目為 position:absolute 時，不寫 position:relative 就會默認為定位於網格容器（但我個人覺得還是寫一下才知道你定位在哪裡）。

彈性項目相關屬性

在第十七天時Grid 基本認識就提過相關屬性，我們再次回顧一下接下來會介紹的屬性有哪些

• grid-row

  • grid-row-start
  • grid-row-end

• grid-column

  • grid-column-start
  • grid-column-end

• grid-area

• justify-self

• align-self

• order

• z-index

資料來源：

• CSS 大全第四版

• CSS grid Layout Module Level 1