CSS grid-template-columns 属性

定义和用法

grid-template-columns 属性规定网格布局中的列数（和宽度）。

这些值是一个用空格分隔的列表，其中每个值指定相应列的尺寸。

另请参阅：

CSS 教程：CSS 网格布局

CSS 参考手册：grid-template-rows 属性

CSS 参考手册：grid-template 属性

实例

例子 1

制作四列的网格容器：

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

亲自试一试

例子 2

制作一个四列的网格布局，并规定每个列的尺寸：

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

亲自试一试

CSS 语法

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。