[Day26] Grid 网格项目

当了解完网格容器的属性後，接下来要进入网格项目的部分，如果你还不了解什麽是网格容器及网格环境，可以回顾地ˊ十七天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