今日完成：

公用header和footer

加上响应式布局

在使用grid布局中，可以使用minxmax()来为轨道指定最小尺寸或最大尺寸。

比如：

grid-template-colums: 15em  4.5fr  minmax(5em,3fr)10%;

布局中间两列是弹性变形的，第三列的最小宽度为5em。如果再变小，布局中将有三个宽度固定的列

(宽度分别为15em、5em和10%)，以及一列尺寸弹性变化的列。

根据内容设定轨道的尺寸（min-content和max-content）

能设置栅格轨道的尺寸为可用空间的几分之几，或者占据固定的空间的的确不错，但是如果想把页面中的某些部分

对齐起来，而无法确定各部分有多宽多高呢？这时可以使用min-content和max-content

这两个关键字的字面意思很简单，但对于它的使用方式来说还是不够明确

max-content的意思是“占据内容所需的最大空间”。对大段文字来说（例如博客文章），

这个值一般意味着尽量多占据可用空间，为内容提供最大空间。

max-content也可以指“宽度尽量大，以防换行”。对常规文本来说，这可能导致列轨道特别宽。

与之相比，min-content的意思是“尽量少占据空间，够显示内容即可”。对文本来说，这意味着宽度会尽量

收窄，只保证最长的单词(如果有图像或表单输入框的话，指宽度最大的行内元素)能在一行里完整显示。这个值会导致栅格元素中有大量断行，而且特别窄特别高。

这两个关键字的强大之处在于，它们将应用于整个栅格轨道上。例如，如果把一列的尺寸设为max-content,

那么整个列轨道的宽度都与列中最宽的内容一样。

提取 组件库这块还可以做的更好

明日计划：

使用css完成轮播图的功能

完成最后的三个官网页面

遇到的问题：

无

收获：

无