网格 在 CSS 中
允许您使用 CSS 网格功能的 CSS 属性
新增！我的 44 页电子书“CSS 在 44 分钟内”已出版！ 😃
#grid-area
默认 grid-area: auto;
网格项目的列和行开始和结束位置会自动设置。
grid-area: main;
您可以使用区域名称。
#grid-auto-columns
定义了隐式创建的网格列的大小：这意味着grid-auto-columns的目标是未使用grid-template-columns或grid-template-areas定义的列。
默认 grid-auto-columns: auto;
隐式创建的列具有auto大小。
grid-auto-columns: 100px;
这里我们将grid-template-areas: "header header header" "sidebar main main"与grid-template-columns: 50px 200px组合。
在这种情况下，grid-template-areas定义了3 列，而grid-template-columns仅定义了2列宽。
因此，第三列的宽度取自grid-auto-columns属性：100px。
#grid-auto-flow
定义自动生成的网格项目的位置。
默认 grid-auto-flow: row;
这里我们有grid-template-areas: "header header header" "sidebar main main" "footer footer footer"，以及一个额外的“其他”网格项目。算法将其放置在它自己的行上。
grid-auto-flow: column;
这里我们有grid-template-areas: "header header header" "sidebar main main" "footer footer footer"，以及一个额外的“其他”网格项目。算法将其放置在它自己的列中。
#grid-auto-rows
定义了隐式创建的网格行的大小：这意味着grid-auto-rows的目标是未使用grid-template-rows或grid-template-areas定义的行。
默认 grid-auto-rows: auto;
隐式创建的行具有auto大小。
grid-auto-rows: 100px;
这里我们将grid-template-areas: "header header header" "sidebar main main" "footer footer footer"与grid-template-rows: 50px 200px组合。
在这种情况下，grid-template-areas定义了3 行，而grid-template-rows仅定义了2行高。
因此，第三行高（页脚）取自grid-auto-rows属性：100px。
#grid-column-end
定义网格项目的列结束位置。
默认 grid-column-end: auto;
在此3 列设置中，网格项目会自动放置。
grid-column-end: 2;
目标网格项目在第二列之前结束。
grid-column-end: 1;
目标网格项目在第一列之前结束，这会自动创建一个第四列。
#grid-column-gap
定义网格容器的列之间的间距。
default grid-column-gap: 0;
移除间隙。
grid-column-gap: 10px;
您可以使用像素值。
grid-column-gap: 3rem;
您可以使用(r)em值。
grid-column-gap: 20%;
您可以使用百分比值。
#grid-column-start
定义网格项目的列起始位置。
default grid-column-start: auto;
在此3 列设置中，网格项目会自动放置。
grid-column-start: 2;
目标网格项目放置在第二列。
grid-column-start: 4;
目标网格项目放置在网格外部，位于自动生成的第四列。
#grid-column
grid-column-start 和 grid-column-end 的简写属性。
default grid-column: auto auto;
网格项目的列起始和结束位置自动设置。
grid-column: 1 / 3;
网格项目从第一列之前开始，在第三列之前结束。
grid-column: span 3;
网格项目跨越3 列。
grid-column: 1 / span 4;
网格项目从第一列之前开始，跨越4 列，在此过程中创建了一个新的列。
grid-column: main;
您可以使用区域名称来“复制”其列起始和结束位置。
#grid-gap
grid-row-gap 和 grid-column-gap 的简写属性。
default grid-gap: 0 0;
移除行和列间隙。
grid-gap: 10px;
您可以设置一个单一值。
grid-gap: 3rem 1rem;
您可以为每个方向设置一个值：行优先，列其次。
#grid-row-end
定义网格项目的行结束位置。
default grid-row-end: auto;
在此3 列设置中，网格项目会自动放置。
grid-row-end: 3;
目标网格项目在第三行之前结束。
grid-row-end: 4;
目标网格项目在第四行之前结束，这会自动创建一个第三行。
#grid-row-gap
定义网格容器的行之间的间隙。
default grid-row-gap: 0;
移除间隙。
grid-row-gap: 10px;
您可以使用像素值。
grid-row-gap: 3rem;
您可以使用(r)em值。
#grid-row-start
定义网格项目的行起始位置。
default grid-row-start: auto;
在此3 列设置中，网格项目自动放置在第一行。
grid-row-start: 2;
目标网格项目放置在第二行。
grid-row-start: 3;
目标网格项目放置在网格外部，位于自动生成的第三行。
#grid-row
grid-row-start 和 grid-row-end 的简写属性。
default grid-row: auto auto;
网格项目的行起始和结束位置自动设置。
grid-row: 1 / 3;
网格项目从第一行之前开始，在第三行之前结束。
grid-row: span 3;
网格项目跨越3 行。
grid-row: 1 / span 4;
网格项目从第一行之前开始，跨越4 行，在此过程中创建了一个新的行。
grid-row: header;
您可以使用区域名称来“复制”其行起始和结束位置。
#grid-template-areas
在网格容器内定义区域。然后，在放置网格项目时可以引用这些区域。
default grid-template-areas: none;
未定义任何区域。
grid-template-areas: "header header header" "sidebar main main";
您可以使用区域名称指定每个网格项目应占据哪些单元格。
#grid-template-columns
定义网格容器的列。您可以使用关键字（如auto）或长度（如10px）来指定列的宽度。列的数量由空格分隔列表中定义的值的数量决定。
default grid-template-columns: none;
未定义任何列，因此您只有一列。
grid-template-columns: auto auto auto;
您可以使用关键字auto，以便每列自动调整自身大小。
grid-template-columns: 80px auto 1rem;
您可以混合单位。
grid-template-columns: 40px 1fr 2fr;
您可以使用fr弹性单位将剩余空间分配到所有弹性列。
#grid-template-rows
定义网格容器的行。您可以使用关键字（如auto）或长度（如10px）来指定行的宽度。行的数量由空格分隔列表中定义的值的数量决定。
default grid-template-rows: none;
未定义任何行。
grid-template-rows: 120px auto 3rem;
您可以混合单位。
grid-template-rows: 20px 1fr 2fr;
您可以使用fr弹性单位将剩余空间分配到所有弹性行。
#grid-template
默认值 grid-template: none;
未定义任何行、列或区域。
grid-template: 200px 1fr / 100px auto 3rem;
您可以先定义行，然后定义列，用斜杠 / 分隔它们。
grid-template: "header header header" 50px "sidebar main main" 200px / 100px auto;
您可以同时定义区域和行以及列尺寸。在这种情况下，每组区域都附带一个行大小。第一行高度为 50px，第二行高度为 200px。侧边栏列宽为 100px，而主列的宽度设置为 auto 并占据剩余宽度。
#grid
grid: "header header header" 50px "sidebar main main" 200px / 100px auto;
您可以将其用作 grid-template 来设置所有显式的行、列和区域。
grid: 200px 100px / auto-flow 30%;
您可以将 grid-template-rows 与 grid-auto-columns 结合使用。
grid: auto-flow 50px / 200px 100px;
您可以将 grid-auto-rows 与 grid-template-columns 结合使用。