定義：
C SS網(wǎng)格布局擅長做頁面框架劃分為幾個主要區(qū)域以及定義這些區(qū)域的大小、位置谓谦、層次等關系（前提是 HTML 生成了這些區(qū)域）。
網(wǎng)格是一個二維的布局系統(tǒng) 可以把內容按照行與列的格式進行排版
網(wǎng)格容器的所有直接子元素將自動成為網(wǎng)格項目
屬性
display grid
定義：
定義網(wǎng)格容器
gird
定義：
設置網(wǎng)格布局
grid-template-columns
定義:
顯式網(wǎng)格的列數(shù)和列寬
屬性值：
- repeat（數(shù)量，單位）
grid-template-rows
定義：
顯式網(wǎng)格的行數(shù)和行高
column-gap
定義：
設置網(wǎng)格列之間的間距
row-gap
定義：
設置網(wǎng)格行之間的間距
gap
定義：
復合屬性 設置網(wǎng)格行與列之間的間距
grid-auto-columns
定義：
定義隱式網(wǎng)格列的列寬
grid-auto-rows
定義：
定義隱式網(wǎng)格行的行高
justify-content
定義：
定義網(wǎng)格沿行軸的對齊方式
align-content
定義：
定義網(wǎng)格沿列軸的對齊方式
align-items
定義：
定義網(wǎng)格單元格沿列軸的對齊方式
justify-items
定義：
定義網(wǎng)格單元格沿行軸的對齊方式
align-self
定義：
設置align-self會覆蓋align-items的值
justify-self
定義：
設置justify-self會覆蓋justify-items的值
grid-column
定義：
設置指定子元素跨列的數(shù)量
grid-column-start
定義：
定義跨列起始線
grid-column-end
定義：
定義跨列結束線
grid-row
定義：
設置指定子元素跨行的數(shù)量
grid-template-areas
定義：
設置命名項目的網(wǎng)格布局
grid-area
定義：
定義網(wǎng)格區(qū)域 是一個簡寫屬性 包含grid-row 和grid-column 可以通過網(wǎng)格線來分配區(qū)域
grid-template
定義：
簡寫屬性可以定義 行 ，列 览绿，分區(qū)
grid-template-areas
定義：
定義顯示網(wǎng)格區(qū)域
單詞
grid ：網(wǎng)格
Row ：行
column ：列
template ：模板
justify ：調整
content ：內容
item ：項目
Container ：容器
self ：自己
Fraction ：片段
Area ：區(qū)域
10 Area ： 10個區(qū)域
2 Area ：2個區(qū)域
grid 布局系統(tǒng)術語
grid container ：網(wǎng)格容器
grid item ：網(wǎng)格項目
gird line ：網(wǎng)格線
行軸
列軸
網(wǎng)格使用的步驟
1.第一步創(chuàng)建網(wǎng)格系統(tǒng)
2.創(chuàng)建模板（確定父元素和子元素）
3.設置名稱
4.設置指定列數(shù)列寬 行數(shù)行寬
布局設計的寬度如下
手機: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. “認證畢業(yè)生”與個人姓名顏色相同，不透明度50%2. 回顧段落內的報價也有相同的顏色暑脆，但不透明度為70%字體排版．字體:13px字體．家族:巴洛半濃縮．重量:500渠啤、600
