定义：
C SS网格布局擅长做页面框架划分为几个主要区域以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。
网格是一个二维的布局系统 可以把内容按照行与列的格式进行排版
网格容器的所有直接子元素将自动成为网格项目
属性
display grid
定义：
定义网格容器
gird
定义：
设置网格布局
grid-template-columns
定义:
显式网格的列数和列宽
属性值：
- repeat（数量，单位）
grid-template-rows
定义：
显式网格的行数和行高
column-gap
定义：
设置网格列之间的间距
row-gap
定义：
设置网格行之间的间距
gap
定义：
复合属性 设置网格行与列之间的间距
grid-auto-columns
定义：
定义隐式网格列的列宽
grid-auto-rows
定义：
定义隐式网格行的行高
justify-content
定义：
定义网格沿行轴的对齐方式
align-content
定义：
定义网格沿列轴的对齐方式
align-items
定义：
定义网格单元格沿列轴的对齐方式
justify-items
定义：
定义网格单元格沿行轴的对齐方式
align-self
定义：
设置align-self会覆盖align-items的值
justify-self
定义：
设置justify-self会覆盖justify-items的值
grid-column
定义：
设置指定子元素跨列的数量
grid-column-start
定义：
定义跨列起始线
grid-column-end
定义：
定义跨列结束线
grid-row
定义：
设置指定子元素跨行的数量
grid-template-areas
定义：
设置命名项目的网格布局
grid-area
定义：
定义网格区域 是一个简写属性 包含grid-row 和grid-column 可以通过网格线来分配区域
grid-template
定义：
简写属性可以定义 行 ，列 ，分区
grid-template-areas
定义：
定义显示网格区域
单词
grid ：网格
Row ：行
column ：列
template ：模板
justify ：调整
content ：内容
item ：项目
Container ：容器
self ：自己
Fraction ：片段
Area ：区域
10 Area ： 10个区域
2 Area ：2个区域
grid 布局系统术语
grid container ：网格容器
grid item ：网格项目
gird line ：网格线
行轴
列轴
网格使用的步骤
1.第一步创建网格系统
2.创建模板（确定父元素和子元素）
3.设置名称
4.设置指定列数列宽 行数行宽
布局设计的宽度如下
手机:375 px桌面:1440像素颜色主要的中等紫色:hsl(263, 55%， 52%)非常深的灰蓝色:hsl(217, 19%， 35%)非常深的深蓝色:hsl(219, 29%， 14%)白色:hsl(0, 0%， 100%)中性浅灰色:hsl(0, 0%， 81%)浅灰蓝色:hsl(210, 46%， 95%)注意文字颜色:1. “认证毕业生”与个人姓名颜色相同，不透明度50%2. 回顾段落内的报价也有相同的颜色，但不透明度为70%字体排版．字体:13px字体．家族:巴洛半浓缩．重量:500、600
