学习内容
网格布局
flex布局 是一维布局 (只能设置一个排列方向 row 或者 column)
grid网格布局 是二维布局 (能同时设置 row 和 column)
容器: 父元素
项目: 子元素
行列: 容器里面水平区域为行，垂直区域为列
单元格/网格 行与列的交叉区域
网格线 横线: 水平网格线 纵线: 垂直网格线
生成1行1列的网格，2根横线 2根纵线
生成2行2列的网格，3根横线 3根纵线
生成n行m列的网格: n+1根横线 m+1根纵线
网格属性
触发网格布局
display: grid (块状网格) inline-grid (行内块网格)
行列划分
grid-template-rows: 行数 有几组数值就表示几行 行高
grid-template-columns: 列数 有几组数值就表示几列 列宽
属性值:
1.数值+px 绝对大小
2.百分比
3.功能函数 repeat (次数,宽高)
4.auto-fill自动填充 (配合功能函数使用) repeat (auto-fill,10opx)
5.fr片段 用比例填充 1fr 2fr 1fr
6.auto 占剩余宽高所有
7.minmax() 最大最小 功能函数
8.网格线命名
[r1] 横线命名
[c1] 纵线命名
行列间距
grid-row-gap 行间距
grid-column-gap 列间距
grid-gap 值1表示水平 值2表示垂直
新写法:
row-gap
column-gap
gap
项目排列顺序
grid-auto-flow: row (默认) / column
单元格内容对齐
justify-items 单元格水平方向对齐方式 start center end stretch (默认拉伸以适应整个网格的宽高)
align-items 单元格垂直方向对齐方式 start center end stretch (默认拉伸以适应整个网格的宽高)
place-items (复合属性) 值1表示水平方向对齐 值2表示垂直方向对齐 只有一个值，水平垂直都生效
单元格项目对齐
justify-content 项目横向对齐方式
align-content 项目垂直方向对齐方式
属性值:
start 顶端
end 末端
center 居中
space-around 环绕对齐 (前后都有距离)
space-between 两端对齐
space-evenly 项目之间的间距相等
stretch 拉伸占据整个网格容器
place-content (复合属性) 值1表示水平方向对齐 值2表示垂直方向对齐 只有一个值，水平垂直都生效
网格命名 grid-template-areas
属性值:
"a b c"
"d e f"
"g h i"
容器属性:
grid-area 通过给网格命名来合并
通过网格线合并网格
grid-column-start: 从第几根纵线开始
grid-column-end: 到第几根纵线结束
grid-column: 值1/值2
grid-row-start: 从第几根行线开始
grid-row-end: 到第几根行线结束
grid-row: 值1/值2
