CSS Grid 布局完整语法指南
使用grid 或者 inline-grid;
/* 显式网格定义*/
grid-template-columns;
grid-template-rows;
grid-template-areas;
/* 隐式网格定义 */
grid-auto-columns;
grid-auto-rows;
grid-auto-flow;
对齐属性
/* grid盒子创造全部容器空间,排列时候有剩余空间的对齐方式 */
justify-content
align-content
/* 具体内容在grid的子级容器空间中的对齐方式 */
justify-items
align-items
位置布局是可以和上面属性一起使用控制grid排列的。
/* 基于线的定位 */
grid-column-start;
grid-column-end;
grid-row-start;
grid-row-end;
/* 基于区域的定位 */
grid-area;
grid布局父级会给子级划分容器空间,子级的height100%是容器空间的100%,而不是父级的100%。
特殊值和函数
self控制
网格项可以相互重叠。您可以使用z-index来控制它们的堆叠顺序。
CSS order属性设置项目在 flex 或 grid 容器中的布局顺序
developer.mozilla.org/en-US/docs/…