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;

属性值

值 描述
none 默认值。在需要时创建列。
auto 列的尺寸取决于容器的大小以及列中项目内容的大小。
max-content 根据列中最大的项目设置每列的尺寸。
min-content 根据列中最小的项目设置每列的尺寸。
length 设置列的尺寸，通过使用合法的长度值。参阅长度单位。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： none
继承： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS Grid Layout Module Level 1
JavaScript 语法： object.style.gridTemplateColumns="50px 50px 50px"

浏览器支持

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44