属性介绍

  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：占据行数范围