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