Thuộc tính lưới CSS
Ví dụ
Tạo bố cục lưới ba cột trong đó hàng đầu tiên cao 150px:
.grid-container {
display: grid;
grid: 150px
/ auto auto auto;
}
Hãy tự mình thử »Định nghĩa và cách sử dụng
Thuộc tính grid
là thuộc tính viết tắt của:
Giá trị mặc định: | không có không có tự động hàng tự động |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | vâng, xem các thuộc tính riêng lẻ . Đọ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: | object .style.grid="250px / auto auto auto" 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 | 57 | 16 | 52 | 10 | 44 |
Cú pháp CSS
grid: none| grid-template-rows /
grid-template-columns | grid-template-areas | grid-template-rows
/ [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | Default value. No specific sizing of the columns or rows | |
grid-template-rows / grid-template-columns | Specifies the size(s) of the columns and rows | Demo ❯ |
grid-template-areas | Specifies the grid layout using named items | Demo ❯ |
grid-template-rows / grid-auto-columns | Specifies the size (height) of the rows, and the auto size of the columns | |
grid-auto-rows / grid-template-columns | Specifies the auto size of the rows, and sets the grid-template-columns property | |
grid-template-rows / grid-auto-flow grid-auto-columns | Specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns | |
grid-auto-flow grid-auto-rows / grid-template-columns | Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property | |
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ụ
Chỉ định hai hàng, trong đó "item1" kéo dài hai cột đầu tiên trong hai hàng đầu tiên (trong bố cục lưới năm cột):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid:
'myArea myArea . . .'
'myArea myArea . . .';
}
Hãy tự mình thử »Ví dụ
Đặt tên cho tất cả các mục và tạo mẫu trang web sẵn sàng sử dụng:
.item1 { grid-area: header; }
.item2 { grid-area:
menu; }
.item3 { grid-area:
main; }
.item4 { grid-area:
right; }
.item5 { grid-area:
footer; }
.grid-container {
display: grid;
grid:
'header header header header header'
'menu main main main right right'
'menu footer footer
footer footer';
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Bộ chứa lưới CSS
Tham khảo CSS: Thuộc tính Grid-template-areas
Tham khảo CSS: Thuộc tính Grid-template-rows
Tham khảo CSS: Thuộc tính Grid-template-columns
Tham khảo CSS: Thuộc tính Grid-auto-rows
Tham khảo CSS: Thuộc tính Grid-auto-columns
Tham khảo CSS: Thuộc tính Grid-auto-flow
Tham khảo CSS: Thuộc tính Grid-row-gap
Tham khảo CSS: Thuộc tính Grid-column-gap