Thuộc tính grid-column của CSS

Định nghĩa và cách sử dụng

Thuộc tính grid-column xác định kích thước của mục lưới và vị trí trong布局 lưới, nó là tắt của các thuộc tính sau:

Xem thêm:

Hướng dẫn CSS:CSS Grid Layout

Mô hình

Ví dụ 1

Làm cho "item1" bắt đầu từ cột 1 và vượt qua hai cột:

.item1 {
  grid-column: 1 / span 2;
}

Thử ngay

Ví dụ 2

Bạn có thể sử dụng giá trị đường cột để thay thế số cột cần vượt qua:

.item1 {
  grid-column: 1 / 3;
}

Thử ngay

Cú pháp CSS

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

Giá trị thuộc tính

Giá trị Mô tả
grid-column-start Định nghĩa từ cột nào bắt đầu hiển thị mục.
grid-column-end Định nghĩa tại哪nối đường cột (column-line) để dừng hiển thị mục, hoặc vượt qua bao nhiêu cột.

Chi tiết kỹ thuật

Giá trị mặc định: auto / auto
Di chuyển: Không
Tạo animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS Grid Layout Module Level 1
Cú pháp JavaScript: object.style.gridColumn="2 / span 2"

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính đó.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44