Thuộc tính CSS grid-template-columns

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

Thuộc tính grid-template-columns quy định số lượng cột (và độ rộng) trong布局 lưới.

Các giá trị này là danh sách phân cách bằng dấu cách, trong đó mỗi giá trị chỉ định kích thước của cột tương ứng.

Xem thêm:

Hướng dẫn CSS:CSS Lưới

Hướng dẫn CSSThuộc tính grid-template-rows

Hướng dẫn CSSThuộc tính grid-template

Mô hình

Ví dụ 1

Tạo khung chứa bốn cột:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Thử ngay

Ví dụ 2

Tạo một布局 lưới bốn cột, và quy định kích thước của mỗi cột:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

Thử ngay

Cú pháp CSS

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
none Giá trị mặc định. Tạo cột khi cần thiết.
auto Kích thước cột phụ thuộc vào kích thước của khung và kích thước nội dung của mục trong cột.
max-content Đặt kích thước mỗi cột dựa trên kích thước lớn nhất của mục trong cột.
min-content Đặt kích thước mỗi cột dựa trên kích thước nhỏ nhất của mục trong cột.
length Đặt kích thước cột, bằng cách sử dụng giá trị độ dài hợp lệ. Xem thêmĐơn vị độ dài.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: Không
Chế 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.gridTemplateColumns="50px 50px 50px"

Hỗ trợ trình duyệt

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

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