![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
GuanhuiCorrection status：qualified
Teacher's comments：注意一下排版！其它没问题！
Collection
Collection
与flex不同的地方，grid布局多出了一个单元格的概念！这里可以理解成3层概念，容器－单元格－项目 [PS;实际还是2层!]并且申明方式:为display:grid;申明之后,就开始在grid里面画板块!就是这么简单!grid-template-cloumn:要几列,写几列!,画嘛!grid-template-row:要几行,写几行!
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>grid布局</title><style>.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;}</style></head><body><div class="container"><div class="item">1</div><div class="item">1</div><div class="item">1</div></div></body></html>
由此可见，grid确实是蛮方便的哈！
grid还单独提供一个简便的设置单元格属性的神操作：行间距和列间距的设置例如：column-gap:10px; row-gap:5px;简写：gap:行间距 列间距
因此，得出的结论：
grid布局太方便了，哈哈！通过以上，总结容器和单元格的关系
| 步骤 | 关键字 | 说明 | 简写方式 |
|---|---|---|---|
| 第一步： | display:grid | 设置为grid容器 | 无 |
| 第二步： | grid-template-columns:100px 100px 100px | 设置3列为100width的列 | 相同参数的情况下：grid-template-column:repeat(3,1fr) | |
| grid-template-rows:100px 100px 100px | 设置3行为100width的列 | 相同参数的情况下：grid-template-rows:repeat(3,1fr) | ||
| 行间距 | row-gap:5px | 设置行间距 | gap:行间距 列间距 | |
| 行间距 | column-gap:10px | 设置列间距 | gap:行间距 列间距 |
| 第三步：根据自己的需求项目里面设置单元格区域[布局] | |
| grid-column:起始列 / 结束列； | |
| grid-row:起始行 / 结束行； | |
| 简写：grid-area:行开始/列开始/行结束/列结束 |
