在玩grid garden游戏的时候，我对css的grid网格布局有了以下的了解。
div{display:grid;属性:参数;属性:参数}
一.通过规则创建模板，作用在容器上的属性grid-template
- column是列，row是行，要注意复数，加上s
grid-template-columns:25% 25% 25% 25%;,容器被划分为4列，每列占25%的大小； 或者写做grid-template-columns:repeat(4,25%);grid-template-rows用法相同 前面的行和列可以一起简写为grid-template:rows的值/columns的值- 单位除了百分比，还可以写px、em等长度单位，还有fr等份。
二.作用在grid子项上的属性
参数可以是数字（正负值）、span区块
- grid-column-start:1———— 以第一根纵线开始
- grid-column-end:2 ———— 以第二根纵线结束
- grid-column:1/2 ————以第一根纵线开始，以第二根纵线结束
- grid-row-start: 1 ———— 以第一根横线开始
- grid-column-end:2 ———— 以第二根横线结束
- grid-crow:1/2————以第一根横线开始，以第二根横线结束
- grid-area：1/1/2/2; r-s/c-s/r-e/c-e
- grid-coulmn grid-row grid-area是显示放置
- order，默认值是0，位置不变；正负值，参考坐标系————控制单个元素
