CSS grid-column 屬性
- 上一頁 grid-auto-rows
- 下一頁 grid-column-end
實例
例子 1
使 "item1" 在列 1 開始并橫跨兩列：
.item1 {
grid-column: 1 / span 2;
}
例子 2
您可以使用列線值代替要跨越的列數：
.item1 {
grid-column: 1 / 3;
}
CSS 語法
grid-column: grid-column-start / grid-column-end;
屬性值
| 值 | 描述 |
|---|---|
| grid-column-start | 規定從哪一列開始顯示項目。 |
| grid-column-end | 規定在哪一條列線（column-line）上停止顯示項目，或跨越多少列。 |
技術細節
| 默認值： | auto / auto |
|---|---|
| 繼承： | 否 |
| 動畫制作： | 支持。請參閱：動畫相關屬性。 |
| 版本： | CSS Grid Layout Module Level 1 |
| JavaScript 語法： | object.style.gridColumn="2 / span 2" |
瀏覽器支持
表格中的數字注明了完全支持該屬性的首個瀏覽器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- 上一頁 grid-auto-rows
- 下一頁 grid-column-end
