属性介绍

  1. grid-template-columns: 列宽
  2. grid-template-rows:行宽
  3. repeat():简化重复的值
  4. auto-fill:自动填充
  5. fr:可用空间的一等分
  6. minmax():长度范围
  7. 间距
    • grid-row-gap:行间距
    • grid-column-gap:列间距
    • grip-gap:行间距 列间距

      grid-row-gap: 10px 表示行间距是 10px,grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的

  8. grid-template-areas:定义区域
  9. grid-area:容器名称,配合grid-template-areas进行空间布局
  10. grid-auto-flow:自动布局,规定大小空间不足时会自动换行/列
    • 先行后列:grid-auto-flow:row,配合grid-template-colums规定每列大小
    • 先列后行:grid-auto-flow:column,配合grid-template-colums规定每行大小
    • grid-auto-flow: row dense:不留空,尽量填满
  11. justify-items:单元格内容的水平位置
  12. aligh-items:单元格的垂直位置
  13. grid-column;占据的列数范围,左闭右开(grid-column: 1/3; 占据[1,3)列)
  14. grid-row:占据行数范围