前言
提示：本文章是使用经验的总结，以便于复习使用，如有错误希望指出
grid布局方式真的好用，无愧于是最强大的 CSS 布局方案。不适合无基础的人看，本文章更像是笔记。
使用和学习参考文章：
1、通过玩游戏学习代码
2、阮一峰的网络日志
3、菜鸟教程
提示：以下是本篇文章正文内容，下面案例可供参考
一、grid布局是什么？
grid布局方式与flex布局方式很像，但又有一定的差异，flex 是一维布局系统，适合做局部布局，比如导航栏组件。grid 是二维布局系统，通常用于整个页面的规划。二者从应用场景来说并不冲突。虽然 flex 也可以用于大的页面布局，但是没有 grid强大和灵活。
二、常用简写（必会）
2.1 grid
在单个声明中设置以下所有属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows,grid-auto-columns, grid-auto-flow （注意：您只能在单个网格声明中指定显式或隐式网格属性）。
示例1:规定行列的大小
grid: 100px 150px / repeat(3, 1fr);
/*
相当于：
grid-template: 100px 150px / repeat(3, 1fr);
*/
示例2.1：设置网格排列方式。
设置auto-flow在/的右侧，相当于设置为按列布局
grid: 100px 150px / auto-flow 100px;
/*
相当于:
grid-template-rows: 100px 150px;
grid-auto-flow: column;
grid-auto-columns: 100px;
*/
示例2.2：设置网格排列方式。
设置auto-flow在/的左侧，相当于设置为按行布局，并且为紧凑类型
grid: auto-flow dense 100px / 1fr 2fr;
/*
相当于:
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
*/
示例3：区域划分
grid: 'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
/*
相当于:
grid-template-areas: 'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
*/
2.2 gap(grid-gap)
用来设置网格行与列之间的间隙，是row-gap和column-gap的简写形式。
grid-gap已经被gap替代
grid-row-gap已经被row-gap替代
grid-column-gap已经被column-gap替代
示例1：
gap: 10px;
/*
相当于：
row-gap: 10px;
column-gap: 10px;
*/
示例2：前行后列
gap: 20px 30px;
/*
相当于：
row-gap: 20px;
column-gap: 30px;
*/
2.3 grid-area
可以设置单元格在网格布局中的大小和位置，也可以对单元格进行命名
示例1：
grid-area: 1/1/4/5;
/*
设置单元格在网格布局中的大小和位置时，四个属性分别是：行开始位置/列开始位置/行结束位置/列结束位置
相当于：
grid-row: 1 / 4;
grid-column:1 / 5;
*/
示例2：
grid-area: header;
/*
可以使用grid-area属性来命名网格元素
命名的网格元素可以通过容器的 grid-template-areas 属性来引用
*/
2.4 grid-template
用于网格布局，设置网格中行、列的大小，也可以使用网格元素的名称来布局
示例1：设置网格中行、列的大小时，/左边是行，/右边是列
grid-template: 100px 1fr auto / min-content max-content minmax(200px, 1fr);
/*
相当于
grid-template-rows: 100px 1fr auto;
grid-template-columns: min-content max-content minmax(200px, 1fr);
*/
示例2：与grid-template-areas用法一致
grid-template: 'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
/*
相当于:
grid-template-areas: 'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
*/
2.5 place-content
可以同时设置align-content（内容区域在容器里面的垂直位置）和justify-content（内容区域在容器里面的水平位置）
示例1：
place-content: center;
/*
相当于：
align-content: center;
justify-content: center;
*/
示例2：先行后列
place-content: start end;
/*
相当于：
align-content: start;
justify-content: end;
*/
2.6 place-items
可以同时设置align-items（单元格内容垂直对齐方式）和justify-items（单元格内容水平对齐方式）
示例1：
place-items: center;
/*
相当于：
align-items: center;
justify-items: center;
*/
示例2：先行后列
place-items: start end;
/*
相当于：
align-items: start;
justify-items: end;
*/
2.7 place-self
可以同时设置align-self（单个单元格内容的垂直位置）和justify-self（单个单元格内容的水平位置）
示例1：
place-self: center;
/*
相当于：
align-self: center;
justify-self: center;
*/
示例2：先行后列
place-self: start end;
/*
相当于：
align-self: start;
justify-self: end;
*/
2.8 grid-column/grid-row
grid-column属性定义了网格元素列的开始和结束位置，也可以使用关键字 “span” 来定义元素将跨越的列数。
示例1：在第 1 列开始，在第 4 列前结束
grid-column: 1 / 4;
/*
相当于：
grid-column-start: 1;
grid-column-end: 4;
*/
示例2：在第 2 列开始，横跨2列
grid-column: 2 / span 2;
grid-鈤属性定义了网格元素列的开始和结束位置，也可以使用关键字 “span” 来定义元素将跨越的列数。
示例3：在第 1 行开始，在第 4行前结束
grid-row: 1 / 4;
/*
相当于：
grid-column-start: 1;
grid-column-end: 4;
*/
示例4：在第 2 行开始，横跨2行
grid-row: 2 / span 2;
三、可能使用到的内容（熟悉）
3.1 grid-template-areas
grid-area 属性可以对网格元素进行命名。
命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
每行由单引号内 ’ ’ 定义，以空格分隔。
. 号表示没有名称的网格项。
3.2 grid-auto-columns/grid-auto-rows
以下介绍直接引用阮一峰老师的解释，老师的笔记链接在最上方。
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
3.4 auto-fill/auto-fit
auto-fit 和 auto-fill 都是模式填充，在网格容器宽度大于网格项的最小宽度总和时就会有区别。
auto-fit将尽可能的创建多的单元格占据行上的空白位置，如果剩下的位置不足以创建一个单元格，则剩余位置的空间大小由其他的单元格平均分配。
auto-fill将尽可能的创建多的单元格占据行上的空白位置，如果剩下的位置不足以创建一个单元格，则会产生留白。
3.5 minmax
minmax(min, max) 函数定义了一个长宽范围的闭区间，共有两个参数，第一个参数为最小值，第二个参数为最大值。
3.6 repeat
用于创建重复行或者列，会接受两个参数
第一个参数可以使重复的次数（整型数）如repeat(4, 1fr)，也可以是auto-fit和auto-fill这两种填充模式
第二个参数的接收值，类型可以为fr、具体长度单位、百分比、auto、max-content、min-content、minmax()所示，并且可以通过空格分割输入多个参数如repeat(3, 1f 100px min-content)
3.7 grid-auto-flow
指定在网格中被自动布局的元素怎样排列
row:默认值。 通过填充每一行来放置网格元素，在必要时增加新列。
column:通过填充每一列来放置网格元素，在必要时增加新列。
dense:该关键字指定自动布局算法使用一种"稠密"堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
row dense:按行来填充网格中前面留下的空白
column dense:按列来填充网格中前面留下的空白
四、可以简写但非简写形式（了解）
4.1 grid-template-rows/grid-template-columns
4.2 row-gap/column-gap
4.3 grid-column-start/grid-column-end
4.4 grid-row-start/grid-row-end
4.5 justify-content/align-content
4.6 justify-self/align-self
4.7 justify-items/align-items
