网格容器
要使 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; }