設定 "item1" 在第 1 列開始,在第 5 列前結束:
.item1 {
grid-column: 1 / 5;
}
表格中的數字表示支援該屬性的第一個浏覽器版本号。
屬性
grid-column
57
16
52
10
44
grid-column 屬性定義了網格元素列的開始和結束位置。
注意: grid-column 是 grid-column-start 和 grid-column-end 屬性的簡寫屬性。
我們可以參考行号來設定網格元素,也可以使用關鍵字 "span" 來定義元素将跨越的列數。
預設值:
auto / auto
繼承:
no
動畫:
支援。 閱讀關于 animatable
版本:
CSS 網格布局子產品 Level 1
JavaScript 文法:
object.style.gridColumn="2 / span 2"
值
描述
grid-column-start
指定從哪一列開始顯示網格元素。
grid-column-end
指定網格元素從哪一列結束,或者設定跨越幾列。
以下執行個體設定 "item1" 跨越 3 列:
grid-column: 1 / span 3;
以下執行個體設定 "item2" 跨越 3 列:
.item2 {
grid-column: 2 / span 3;
CSS 教程: CSS 網格布局