今天完成的事情：

完成了任务8

加深学习了网格布局

grid-auto-flow 属性

grid-auto-flow: column;

（元素先行后列）

justify-items 属性 align-items 属性

justify-items: start | end | center | stretch;

align-items: start | end | center | stretch;

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

justify-items属性设置单元格内容的水平位置（左中右）

align-items属性设置单元格内容的垂直位置（上中下）

justify-content 属性 align-content 属性

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;

justify-content属性是整个内容区域在容器里面的水平位置（左中右）

align-content属性是整个内容区域的垂直位置（上中下）

start - 对齐容器的起始边框

end - 对齐容器的结束边框

center - 容器内部居中

stretch - 项目大小没有指定时，拉伸占据整个网格容器

space-around - 每个项目两侧的间隔相等。所以，项目

之间的间隔比项目与容器边框的间隔大一倍

space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔

space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔