Thuộc tính grid-auto-columns trong CSS

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

Thuộc tính grid-auto-columns đặt kích thước của các cột trong khay lưới.

Thuộc tính này chỉ ảnh hưởng đến các cột chưa được đặt kích thước.

Xem thêm:

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

Cuốn sách tham khảo CSS:Thuộc tính grid-auto-rows

Mẫu

Đặt kích thước mặc định cho các cột trong lưới:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

Thử ngay

Cú pháp CSS

grid-auto-columns: auto|max-content|min-content|length;

Giá trị thuộc tính

Giá trị Mô tả
auto Giá trị mặc định. Kích thước cột do kích thước của khay quyết định.
fit-content()
max-content Đặt kích thước mỗi cột dựa trên mục lớn nhất trong cột.
min-content Đặt kích thước mỗi cột dựa trên mục nhỏ nhất trong cột.
minmax(min.max) Đặt khoảng kích thước từ min đến max.
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ị đo dài。
% Đặt kích thước cột, bằng cách sử dụng phần trăm.

Chi tiết kỹ thuật

Giá trị mặc định: auto
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.gridAutoColumns="120px"

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