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 教程: CSS 网格布局

CSS 参考手册: grid-area 属性

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

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

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