今天完成的事情： 

完成任务十四十五，回顾css和html，总结梳理

明天计划的事情： 

回顾css和html，继续总结梳理

遇到的问题：

收获：

今天看了一个网格布局（grid布局），当前的兼容性还不错

一、网格容器

1.display:grid/grid-inline

2.grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行 

   fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

grid-template-columns: 1fr 1fr 2fr

    minmax()函数来创建网格轨道的最小或最大尺寸。minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压

grid-template-rows: minmax(100px, auto);

grid-template-columns: minmax(auto, 50%) 1fr 3em;

   repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。

grid-template-rows: repeat(3, 1fr);   

grid-template-columns: 30px repeat(3, 1fr) 30px;

二、间距

1.grid-column-gap 创建列与列之间的间距

2.grid-row-gap 创建行与行之间的间距

3.grid-gap  

    grid-gap是grid-row-gap和grid-column-gap两个属性的缩写，如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值。如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值相同。

三、网格线

1.【grid-row-start】【grid-row-end】【grid-column-start】【grid-column-end】

    通过网格线可以定位网格项目。网格线实际上是代表线的开始、结束，两者之间就是网格列或行。每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1

grid-row-start: 2;

grid-row-end: 3; 

grid-column-start: 2; 

grid-column-end: 3;

2.【grid-row】【grid-column】

     grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写。如果只提供一个值，则指定了grid-row-start(grid-column-start)值；如果提供两个值，第一个值是grid-row-start(grid-column-start)的值，第二个值是grid-row-end(grid-column-end)的值，两者之间必须要用/隔开

grid-row: 2; 

grid-column: 3 / 4;

3.关键词span后面紧随数字，表示合并多少个列或行

grid-row: 1 / span 3;

grid-column: span 2;

4.【grid-area】指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end

grid-area: 2 / 2 / 3 / 3;

5.网格线命名

   分配网格线名称必须用方括号[网格线名称]，然后后面紧跟网格轨道的尺寸值。

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

   使用repeat()函数可以给网格线分配相同的名称。

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);

grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

  使用repeat()函数可以给网格线命名，这也导致多个网格线具有相同的网格线名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符

  使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开 

grid-row: row-start 2 / row-end 3;

grid-column: col-start / col-start 3;

6.网格区域命名

   grid-template-areas 引用网格区域名称也可以设置网格项目位置

grid-template-areas:   "header header"   "content sidebar"    "footer footer";

grid-template-rows:    150px 1fr 100px;

grid-template-columns: 1fr 200px;

7.grid-auto-flow 网格默认流方向是row，可以通过grid-auto-flow属性把网格流的方向改变成column　　 

grid-auto-flow: column

四、对齐

【网格项目对齐方式（Box Alignment）】

　　CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式。

【justify-items】

【justify-self】

　　justify-items和justify-self指定网格项目沿着行轴对齐方式；align-items和align-self指定网格项目沿着列轴对齐方式。

　　justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline