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;