目录

CSS grid-template-columns 属性

❮上一节完整的CSS参考下一节❯

示例

制作一个 4 列网格容器：

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

亲自试一试 »

定义和用法

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

这些值是空格分隔的列表，其中每个值指定相应列的大小。

展示演示❯

默认值：	没有任何
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS 网格布局模块级别 1
JavaScript 语法：	对象.style.gridTemplateColumns="50px 50px 50px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
grid-template-columns	57	16	52	10	44

CSS 语法

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

属性值

Value	Description	Demo
none	Default value. Columns are created if needed	Demo ❯
auto	The size of the columns is determined by the size of the container and on the size of the content of the items in the column	Demo ❯
max-content	Sets the size of each column to depend on the largest item in the column	Demo ❯
min-content	Sets the size of each column to depend on the smallest item in the column
length	Sets the size of the columns, by using a legal length value. Read about length units	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

创建一个 4 列网格容器，并指定每列的大小：

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

亲自试一试 »

相关页面

CSS 教程：CSS 网格布局

CSS 参考：网格模板行属性

CSS 参考：网格模板属性

❮上一节完整的CSS参考下一节❯