Thuộc tính cột mẫu lưới CSS
Ví dụ
Tạo một thùng chứa lưới 4 cột:
.grid-container {
display: grid;
grid-template-columns:
auto auto auto auto;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính grid-template-columns
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 có |
---|---|
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.gridTemplateColumns="50px 50px 50px" 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-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 | Demo |
---|---|---|
none | Default value. Columns are created if needed | Demo ❯ |
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 | Demo ❯ |
max-content | Sets the size of each column to depend on the largest item in the column | Demo ❯ |
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 | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví 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;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Bố cục lưới CSS
Tham khảo CSS: Thuộc tính Grid-template-rows
Tham khảo CSS: Thuộc tính Grid-template