欢迎关注路条编程网站，通过学习 CSS Grid 网格布局这一系列文章，你将会逐步掌握网格布局的容器和项目、行和列、单元格、网络线等相关的知识。
使用 align-items 属性垂直对齐网格所有项目。align-items 指定了网格元素的垂直呈现方式，可以是垂直拉伸显示，也可以是顶部居中底部对齐。语法如下所示：
```css
```
属性及相应描述如下所示：
- start:网格垂直尺寸收缩为内容大小，同时沿着上网格线顶部对齐显示。
- end:网格垂直尺寸收缩为内容大小，同时沿着下网格线底部对齐显示。
- center:网格垂直尺寸收缩为内容大小，同时在当前网格区域内部垂直居中对齐显示。
- stretch(默认值):拉伸。表现为垂直填充。
左中右及拉伸对齐语法示例如下所示：
```css
```
接下来，我们将调整页面框架模块9,增加一个3行3列的容器，容器中包含9个项目。本示例只增加了垂直底端对齐方式，容器的主样式类为`.grid-gap-main .align-items-end`,定义3列宽度分别为100px、50px、100px,定义3行高度分别为80px、auto。
请根据提供的内容完成内容重构，并保持段落结构。调整后的样式代码如下所示：
```html
```
调整 html 代码如下所示：
```html
1
2
3
4
5
6
7
8
9
```
保存页面代码，预览页面，整体效果图如下所示：
好的，我会听从您的命令。
