这是我参与「第四届青训营 」笔记创作活动的的第2天
以下是结合上课和网络资料共同整理的复习笔记
Grid 布局:即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。Grid是一种二维布局，将容器划分成了“行”和“列”，产生了许多的网格，可根据行列关系找到所需元素。
diaplay:grid(容器为块级元素）或者 display：inline-grid（容器为行内元素）
-
是元素生成一个块级的Grid容器
-
使用grid-template相关属性将同期划分为网格
- grid-template-columns：----->设置列宽（设置几个pixel即为几列）
- grid-template-rows：-------->设置行高（设置几个pixel即为几行）
- grid（-rows/-colums）-gap: 20px 50px------->设置行间距和列间距
-
根据设置行列数量来决定元素所在区域
-
grid-row-start-----始
-
grid-row-end-------末
-
repeat(重复的次数，重复的值)函数可以简写上面的代码
关键字：auto-fill 自动填充
fr空间的一份,按比例分布
-
根据上面的属性可以划分出行的区域，列类似
-
可缩写为grid-area:1/1/1/1;grid-templay-areas(定义区域）常搭配使用
-
网格单元：一个网格单元是在一个网格元素中最小的单位
网格线：划分网格的线，称为"网格线"。
minmax(min，max) 函数：设置网格元素一个最小和最大的尺寸\
grid-auto-flow控制布局，默认row(先行后列)，column（先列后行），自动换行
其中关键字row dense可实现自动换行中的空白填充
justify-items 属性、align-items 属性以及 place-items 属性等属性可对比flex布局学习\
标题：最强大的 CSS 布局 —— Grid 布局 - 掘金
