CSS:grid布局速览

  • display: grid;
  • grid-column-start:
    • 值为n, 表示从第n个格子开始;
    • span n, 表示从end的位置往前推n格;
    • grid-row-start同理;
  • grid-column-end:
    • 值为n, 表示到第n个格子结束;
    • span n, 表示从start的位置开始持续n格;
    • grid-row-end同理;
  • grid-column:
    • n/m, 表示从第n格开始到第m格结束;
    • grid-row同理;
  • grid-area:
    • 打包grid-row和grid-column;
  • order:
    • 子元素上调整位置;
  • grid-template-columns:
    • 值为各个格子的横向大小;
    • repeat(n, m), 表示有n格, 各格为m的大小;
    • grid-template-rows同理;
  • grid-template:
    • 打包grid-template-rows和grid-template-columns;