注册登录

CSS grid-template-columns 属性

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 属性

计算机