CSS grid-template-columns 属性

实例

制作 4 列的网格容器：

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

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
grid-template-columns	57	16	52	10	44

grid-template-columns 属性用于设置网格布局中的列数及宽度。

默认值:	auto
继承:	no
动画:	支持。阅读关于 animatable 尝试一下
版本:	CSS 网格布局模块 Level 1
JavaScript 语法:	object.style.gridTemplateColumns="50px 50px 50px" 尝试一下

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

值	描述
none	默认值，不指定列的大小。
auto	列的大小由容器的大小和列中网格元素内容的大小决定。
max-content	每列的大小设置为该列中最大网格元素的大小。
min-content	每列的大小设置为该列中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。了解更多长度单位。
initial	将此属性设置为默认值。阅读关于 initial
inherit	从父元素继承该属性。阅读关于 inherit

制作一个 4 列的网格容器，并为每列设置一个尺寸：

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

CSS 参考手册: grid-area 属性

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

CSS 参考手册: grid-template-columns 属性

CSS 参考手册: grid-template-areas 属性