天天看點

CSS grid-column 屬性

設定 "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 網格布局