Thuộc tính cột tự động lưới CSS
Ví dụ
Đặt kích thước mặc định cho các cột trong lưới:
.grid-container {
display: grid;
grid-auto-columns: 50px;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính grid-auto-columns
đặt kích thước cho các cột trong vùng chứa lưới.
Thuộc tính này chỉ ảnh hưởng đến các cột có kích thước không được đặt.
Giá trị mặc định: | tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | Mô-đun bố cục lưới CSS cấp 1 |
Cú pháp JavaScript: | đối tượng .style.gridAutoColumns="120px" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
grid-auto-columns | 57 | 16 | 52 | 10 | 44 |
Cú pháp CSS
grid-auto-columns: auto|max-content|min-content| length ;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
auto | Default value. The size of the columns is determined by the size of the container | Demo ❯ |
fit-content() | ||
max-content | Sets the size of each column depending on the largest item in the column | Demo ❯ |
min-content | Sets the size of each column depending on the smallest item in the column | Demo ❯ |
minmax(min.max) | Sets a size range greater than or equal to min and less than or equal to max | |
length | Sets the size of the columns, by using a legal length value. Read about length units | Demo ❯ |
% | Sets the size of the columns, by using a percent value | Demo ❯ |
Trang liên quan
Hướng dẫn CSS: Bố cục lưới CSS
Tham khảo CSS: Thuộc tính Grid-auto-rows