小白看了都说好系列，grid布局

今天我们来学习grid布局，它是一个网格布局，与flex布局配合使用，完成一个比较完美操作简单的布局，grid布局中是把容器划分成行和列，产生的单元格，然后项目就在单元格里面，上一章我们说过容器和项目就是大盒子与大盒子里面的小盒子，然后我们现在直接开始今天的学习。

Grid布局与flex布局一样有行和列，但是里面又有间距和区域，所以总的功能比flex布局强大，而且代码实现也比flex布局简洁，看下图（记住了grid布局简简单单）

容器属性

列表示属性：Grid-template-columns

行表示属性：Grid-template-rows

列的间距表示属性：columns -gap

行的间距表示属性：rows -gap

行和列间距表示属性简写： gap

区域表示属性：Grid-template-area

所有项目的排列方式：Grid-auto-flow

所有项目水平方向的对齐方式：Justify-items

所有项目垂直方向的对齐方式：align-items

组合写法：place-items

1. Grid-template-columns与Grid-template-rows

css写法：grid-template-columns: repeat(3,1fr);

css写法：grid-template-row: repeat(3,1fr);

这里的意思是将容器的列或者行分为三份，然后将对应的项目放入一份格子里面，项目可以写大小也可以不写，看具体境况，看下图

1. column -gap与row -gap总的一起写为gap

column-gap表示列之间的间距

row-gap表示行之间的间距

            column-gap: 10px;

            row-gap: 10px;

这里表示列或行之间的间距为10px，下图有实践

 

1. 间距学完了现在我们来学Grid-template-area，看下图

grid-template-areas: 

    'top top top'

    'nav nav nav'

    'aside main main'

    'footer footer footer';

名字一样就是格子合并，在这里面你想分几份都可以加上去，操作简单

讲完这些基本没啥好讲的了，下面的我一笔带过。

1. 所有项目的排列方式：Grid-auto-flow

这个主要是空间率用率问题，

1. 所有项目水平方向的对齐方式：Justify-items
2. 所有项目垂直方向的对齐方式：align-items

上面两个呢就是每个项目距离最近的网格线排列

还有一些项目的属性，这个的话我这里给大家一个item，整理过，看图就可以明白