CSS 网格容器
1
2
3
4
5
6
7
8
网格容器
要使 HTML 元素表现为网格容器，必须设置 display 财产grid 或者inline-grid.
网格容器由放置在列和行内的网格项组成。
grid-template-columns 属性
这 grid-template-columns 属性定义网格布局中的列数，并且可以定义每列的宽度。
该值是一个空格分隔的列表，其中每个值定义相应列的宽度。
如果您希望网格布局包含 4 列，请指定 4 列的宽度，如果所有列的宽度相同，则指定“自动”。
笔记： 如果 4 列网格中有超过 4 个项目，则网格将自动添加新行来放置这些项目。
这 grid-template-columns 属性还可用于指定列的大小（宽度）。
grid-template-rows 属性
这 grid-template-rows 属性定义每行的高度。
1
2
3
4
5
6
7
8
该值是一个空格分隔的列表，其中每个值定义相应行的高度：
justify-content 属性
这 justify-content 属性用于对齐容器内的整个网格。
1
2
3
4
5
6
笔记： 网格的总宽度必须小于容器的宽度justify-content 财产产生任何影响。
align-content 属性
这 align-content 财产用于垂直 将容器内的整个网格对齐。
1
2
3
4
5
6
笔记： 网格的总高度必须小于容器的高度align-content 财产产生任何影响。
