Grid归纳

116 阅读1分钟

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/…

间距控制 column-gap;row-gap;

repeat() 函数

minmax() 函数

fit-content() 函数

命名线和区域示例

grid Subgrid

developer.mozilla.org/en-US/docs/…