【Day18】Grid网格布局

学习内容

• 网格布局
• 网格属性

网格布局

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复制