grid 网格 ​

display: grid / inline-grid;

/* 设置列宽 */
grid-template-rows: 多个定宽 / repeat(auto-fill, 200px) / fr（剩余空间等分比例）/ auto
grid-template-rows: 200px 200px 200px;  /* 一行三个子项目，每个定宽 200px */
grid-template-rows: 200px 2fr 1fx;  /* 一行三个子项目，第一个 200px，第二个剩余宽度的 2/3 */
grid-template-rows: 200px auto 100px;  /* 一行三个子项目，中间宽度自动 */
grid-template-rows: 1fr 1fr minmax(300px, 2fr); /* 第三个列宽最小300px，最大2倍前两个宽度 */

/* 设置行高，属性与上方列宽一样 */
grid-template-columns:

/* 设置间距 */
grid-row-gap: 20px; /* 设置行间距 */
grid-column-gap: 20px; /* 设置列间距 */
grid-gap: 20px; /* 以上行列间距的缩写 */

/* 设置 项目内部的 对齐方式 */
justify-items: start | end | center | stretch;  /* 水平对齐方式 */
align-items:   start | end | center | stretch;  /* 垂直对齐方式 */

/* 设置父容器的对齐方式 */
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content:   start | end | center | stretch | space-around | space-between | space-evenly;

display: grid / inline-grid;

/* 设置列宽 */
grid-template-rows: 多个定宽 / repeat(auto-fill, 200px) / fr（剩余空间等分比例）/ auto
grid-template-rows: 200px 200px 200px;  /* 一行三个子项目，每个定宽 200px */
grid-template-rows: 200px 2fr 1fx;  /* 一行三个子项目，第一个 200px，第二个剩余宽度的 2/3 */
grid-template-rows: 200px auto 100px;  /* 一行三个子项目，中间宽度自动 */
grid-template-rows: 1fr 1fr minmax(300px, 2fr); /* 第三个列宽最小300px，最大2倍前两个宽度 */

/* 设置行高，属性与上方列宽一样 */
grid-template-columns:

/* 设置间距 */
grid-row-gap: 20px; /* 设置行间距 */
grid-column-gap: 20px; /* 设置列间距 */
grid-gap: 20px; /* 以上行列间距的缩写 */

/* 设置 项目内部的 对齐方式 */
justify-items: start | end | center | stretch;  /* 水平对齐方式 */
align-items:   start | end | center | stretch;  /* 垂直对齐方式 */

/* 设置父容器的对齐方式 */
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content:   start | end | center | stretch | space-around | space-between | space-evenly;