Thuộc tính lưới-mẫu-cột CSS
Thí dụ
Tạo vùng chứa lưới 4 cột:
.grid-container {
display: grid;
grid-template-columns:
auto auto auto auto;
}
Định nghĩa và Cách sử dụng
Thuộc grid-template-columns
tính chỉ định số lượng (và độ rộng) của các cột trong bố cục lưới.
Các giá trị là một danh sách được phân tá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.
Giá trị mặc định: | không ai |
---|---|
Thừa hưởng: | không |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | Mô-đun bố cục lưới CSS cấp độ 1 |
Cú pháp JavaScript: | đối tượng .style.gridTemplateColumns = "50px 50px 50px" |
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-template-columns | 57 | 16 | 52 | 10 | 44 |
Cú pháp CSS
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
none | Default value. Columns are created if needed | |
auto | The size of the columns is determined by the size of the container and on the size of the content of the items in the column | |
max-content | Sets the size of each column to depend on the largest item in the column | |
min-content | Sets the size of each column to depend on the smallest item in the column | |
length | Sets the size of the columns, by using a legal length value. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Tạo vùng chứa lưới 4 cột và chỉ định kích thước cho mỗi cột:
.grid-container {
display: grid;
grid-template-columns:
30px 200px auto 100px;
}
Các trang liên quan
Hướng dẫn CSS: Bố cục Lưới CSS
Tham chiếu CSS: Thuộc tính lưới-mẫu-hàng
Tham chiếu CSS: Thuộc tính lưới-mẫu