目录

CSS grid-column 属性


示例

让 "item1" 从第 1 列开始并跨越 2 列:

.item1 {
  grid-column: 1 / span 2;
}
亲自试一试 »

定义和用法

这个grid-columnproperty 指定网格布局中网格项的大小和位置,并且是以下属性的简写属性:

展示演示❯

默认值: 自动/自动
遗传:
可动画: 是的。阅读可动画的尝试一下
版本: CSS 网格布局模块级别 1
JavaScript 语法: 对象.style.gridColumn="2 / span 2"尝试一下

浏览器支持

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

Property
grid-column 57 16 52 10 44


CSS 语法

grid-column: grid-column-start / grid-column-end;

属性值

Value Description Demo
grid-column-start Specifies on which column to start displaying the item. Demo ❯
grid-column-end Specifies on which column-line to stop displaying the item, or how many columns to span. Demo ❯

更多示例

示例

您可以使用列-行值而不是要跨越的列数:

.item1 {
  grid-column: 1 / 3;
}
亲自试一试 »

相关页面

CSS教程:CSS 网格布局