CSS 网格容器

网格容器

要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。

网格容器内放置着由列和行内组成的网格元素。

grid-template-columns 属性

grid-template-columns 属性定义了网格布局中的列的数量，它也可以设置每个列的宽度。

属性值是一个以空格分隔的列表，其中每个值定义相对应列的宽度。

如果您希望网格布局包含 4 列，则需要设置 4 列的宽度，如果所有列的宽度都是一样的，可以设置为 auto。

以下实例设置了 4 列的网格布局：

实例

.grid-container { display: grid; grid-template-columns: auto auto auto auto; }