今天完成的事情：

学习了网格布局

CSS Grid（网格布局）

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"

行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

display 属性

display: grid指定一个容器采用网格布局

div {
  display: grid;}

默认情况下，容器元素都是块级元素，但也可以设成行内元素

div {
  display: inline-grid;}

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高

.container {  display: grid;

 grid-template-columns: 100px 100px 100px;

 grid-template-rows: 100px 100px 100px;}

repeat()简写

.container {  display: grid;

 grid-template-columns: repeat(3, 33.33%); 

  grid-template-rows: repeat(3, 33.33%);}

遇到的问题

没有完全理解网格，需要加深理解