这是我参与「第四届青训营 」笔记创作活动的的第2天
1.Grid布局
Grid布局是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格 ，可以看作是二维布局
2.基本属性
2.1.grid-template-columns和grid-template-rows
- 想要多少行或者多少列，就通过填写相应属性值的个数来实现
grid-template-columns:100px 100px 100px 100px;//显示为4列，每一列宽度为100px，等同于grid-template-columns:repeat(4,100px);
- 关键字fr（片段的意思），更加方便的表示比例关系
gird-template-columns: 1fr 2fr 1fr;//行宽分成4份，各占1 2 1 份
- auto-fill属性，单元格大小固定时，容器大小不确定时，这个属性就可以自动填充
grid-template-columns: repeat(auto-fill,100px)
-minmax()：产生一个长度范围，表示长度就在这个范围之中，两个参数分别为最小值和最大值
grid-template-columns: 1fr minmax(150px 1fr);
2.2.grid-gap
- grid-column-gap:表示列之间的宽度
- grid-column-gap:表示行之间的宽度
- grid-gap:表示行与列之间的宽度
2.3.grid-template-areas
- 决定一个区域由多少个单元格组成
- 不需要利用的区域，则用“.”表示
- 名字相同表示在一个区域
grid-template-areas: 'a b c' 'd e f' 'g . h'
2.4.grid-auto-flow
- 划分网格后，容器的子元素会按照默认顺序（先行后列）来放置
- 可以通过这个属性来改变放置的顺序
2.5. grid-column-start/grid-column-end和grid-row-start/grid-row-end
- 用来指定item的具体位置
grid-column-start:1;grid-column-end: 3;//项目占用了从第一根列网格线到第三根列网格线- 上面的缩写为
gird-column: 1 / 3; - gird-area属性还可用作这四个属性的合并简写形式，直接指定项目的位置
grid-area:<row-start> / <column-start> / <row-end> / <column-end>;
3.其他属性
- justify-content和align-content属性……，与flex类似
