什么是grid布局

Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看做是一维布局，grid布局则是将容器划分为“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看做是二维布局，grid 布局远比 flex 布局更加的强大。

布局方式--常用的三种

传统的布局方式

利用 position 属性 + display 属性 + float 属性布局，兼容性好，但是效率低，麻烦。
flex 布局

有自己的一套属性，效率高，学习成本低，兼容性强。
grid 布局

网格布局（grid）是强大的 css 布局方案。但是知识点较多，学习成本较困难，兼容性不如flex。

grid属性

容器属性

grid-template-*

你想要多少行或者列，就填写相应属性的个数，不填写，自动分配。

基本方法代码片段 repeat属性
```
grid-template-columns: repeat(3,100px);
复制代码
```
auto-fill属性根据宽高自动填充
```
grid-template-columns: repeat(auto-fill,100px);
复制代码
```
fr 为了比较方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为“片段”）
```
grid-template-columns: repeat(3,1fr);
复制代码
```
row-gap 行距
```
row-gap: 20px;
复制代码
```
column-gap 列距
```
column-gap: 30px;
复制代码
```
gap 间距
```
gap: 20px 30px;
复制代码
```
grid-template-areas

一个区域由单个或者是多个单元格组成
```
grid-template-areas: 'a b c' 'd e f' 'g h i';
grid-template-areas: 'a a a' 'b b b' 'c c c';
grid-template-areas: 'a . c' 'd . f' 'g . i';
复制代码
```
区域不需要利用，则使用点 . 来表示

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为-start，终止网格线自动命名为区域名-end
grid-auto-flow

划分网络以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是：“先行后列“，即先填满第一行，再开始放入第二行（就是子元素的排放顺序）

row：先行后列

column：先列后行
justify-items / align-items 对齐方式

设置单元格内容的水平和垂直方向

justify-items： start|end|center|stretch|space-around|space-between|space-evenly
```
/* 水平方向 */
justify-items: center;
/* 垂直方向 */
align-items: center;
复制代码
```
place-items属性是align-items属性和justify-items属性的合并简写形式

place-items：
justify-content/align-content对齐方式
```
justify-content: center;
align-content: center;
复制代码
```
设置整个内容区域的水平和垂直方向
grid-auto-columns/grid-auto-rows

用来设置多出来的项目宽和高
```
grid-auto-rows:50px;
复制代码
```
比如说，我只设置了3*3个项目，但是实际有10个，整个属性就是用来设置多出来的项目。

项目属性

grid-column-start/grid-column-end/grid-row-start/grid-row-end

一句话解释，用来指定item的具体位置，根据在哪根网格线
```
grid-column-start: 1;
grid-column-end: 3;
复制代码
```
上面的代码就是说，第一个项目占用了从第一根到第三根。

也可以简写为
```
grid-column:1/3;
复制代码
```
还有一种写法
```
grid-column-start: span 2;
grid-column-end: span 2;
复制代码
```
这种写法的意思就是，从起点（终点）向前（向后）跨越两个格子。
grid-area

上面定义了grid-template-areas，在这里就可以进行利用
```
grid-area:a;
复制代码
```
grid-area属性还可以用作grid-row-start，grid-column-start，grid-row-end，grid-column-end的合并简写形式，直接指定项目的位置。
```
grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;
复制代码
```
可以写成下面的形式：
```
grid-area: 1 / 3 / 1 / 3 ;
复制代码
```
justify-self / align-self / place-self

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目（水平方向）

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目（垂直方向）
```
align-self: start | end | center | stretch;
复制代码
```
place-self属性是align-self属性和justify-self属性的合并简写形式place-self : center center ;

结语

如果文章有不正确的地方或者，欢迎评论指出。

CSS 网格布局 | 青训营笔记

什么是grid布局

布局方式--常用的三种

grid属性

容器属性

项目属性

结语