Thuộc tính vùng lưới CSS
Ví dụ
Đặt "item1" bắt đầu ở hàng 2 cột 1 và trải dài 2 hàng và 3 cột:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính grid-area
chỉ định kích thước và vị trí của mục lưới trong bố cục lưới và là thuộc tính viết tắt cho các thuộc tính sau:
Thuộc tính grid-area
cũng có thể được sử dụng để gán tên cho một mục lưới. Sau đó, các mục lưới được đặt tên có thể được tham chiếu đến bằng thuộc tính Grid-template-areas của vùng chứa lưới. Xem ví dụ dưới đây.
Giá trị mặc định: | tự động/tự động/tự động/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: | object .style.gridArea="1 / 2 / span 2 / span 3" Hãy 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-area | 57 | 16 | 52 | 10 | 44 |
Cú pháp CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname ;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
grid-row-start | Specifies on which row to start displaying the item. | Demo ❯ |
grid-column-start | Specifies on which column to start displaying the item. | Demo ❯ |
grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. | Demo ❯ |
grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. | Demo ❯ |
itemname | Specifies a name for the grid item |
Thêm ví dụ
Ví dụ
Item1 lấy tên "myArea" và bao gồm tất cả năm cột trong bố cục lưới năm cột:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
Hãy tự mình thử »Ví dụ
Để "myArea" trải dài hai cột trong bố cục lưới năm cột (dấu chấm biểu thị các mục không có tên):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
Hãy tự mình thử »Ví dụ
Làm cho "item1" trải dài hai cột và hai hàng:
.grid-container {
grid-template-areas: '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 {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Bố cục lưới CSS