Mục lưới CSS
1
2
3
4
5
Phần tử con (Vật phẩm)
Một vùng chứa lưới chứa các mục lưới .
Theo mặc định, một vùng chứa có một mục lưới cho mỗi cột, trong mỗi hàng, nhưng bạn có thể tạo kiểu cho các mục lưới để chúng sẽ trải dài trên nhiều cột và / hoặc hàng.
Thuộc tính cột lưới:
Thuộc grid-columntính xác định (các) cột nào để đặt một mục.
Bạn xác định nơi mục sẽ bắt đầu và nơi mục sẽ kết thúc.
1
2
3
4
5
6
7
số 8
9
10
11
12
13
14
15
Lưu ý: Thuộc grid-columntính là một thuộc tính viết tắt cho các thuộc tính grid-column-startvà grid-column-end.
Để đặt một mặt hàng, bạn có thể tham khảo số dòng hoặc sử dụng từ khóa "span" để xác định số lượng cột mà mặt hàng đó sẽ kéo dài.
Thí dụ
Đặt "item1" bắt đầu trên cột 1 và kết thúc trước cột 5:
.item1 {
grid-column: 1 / 5;
}
Thí dụ
Đặt "item1" bắt đầu trên cột 1 và kéo dài 3 cột:
.item1 {
grid-column: 1 / span 3;
}
Thí dụ
Đặt "item2" bắt đầu trên cột 2 và kéo dài 3 cột:
.item2 {
grid-column: 2 / span 3;
}
Thuộc tính hàng lưới:
Thuộc grid-rowtính xác định hàng để đặt một mục.
Bạn xác định nơi mục sẽ bắt đầu và nơi mục sẽ kết thúc.
1
2
3
4
5
6
7
số 8
9
10
11
12
13
14
15
16
Lưu ý: Thuộc grid-rowtính là một thuộc tính viết tắt cho các thuộc tính grid-row-startvà grid-row-end.
Để đặt một mặt hàng, bạn có thể tham khảo số dòng hoặc sử dụng từ khóa "span" để xác định số hàng mà mặt hàng đó sẽ kéo dài:
Thí dụ
Đặt "item1" bắt đầu ở dòng 1 và kết thúc ở dòng 4:
.item1 {
grid-row: 1 / 4;
}
Thí dụ
Đặt "item1" bắt đầu trên hàng 1 và kéo dài 2 hàng:
.item1 {
grid-row: 1 / span 2;
}
Thuộc tính vùng lưới
Thuộc grid-areatính có thể được sử dụng như một thuộc tính viết tắt cho các
thuộc tính grid-row-start, và .grid-column-startgrid-row-endgrid-column-end
1
2
3
4
5
6
7
số 8
9
10
11
12
13
14
15
Thí dụ
Đặt "item8" bắt đầu trên dòng 1 và cột 2 và kết thúc ở dòng 5 và dòng 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Thí dụ
Đặt "item8" bắt đầu trên hàng-dòng 2 và cột-dòng 1, và kéo dài 2 hàng và 3 cột:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Đặt tên các mục trong lưới
Thuộc grid-areatính cũng có thể được sử dụng để gán tên cho các mục lưới.
Tiêu đề
Thực đơn
Chủ yếu
Đúng
Chân trang
Các mục lưới được đặt tên có thể được tham chiếu bởi thuộc grid-template-areastính của vùng chứa lưới.
Thí dụ
Item1 có tên "myArea" và trải dài tất cả năm cột trong bố cục lưới năm cột:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Mỗi hàng được xác định bằng dấu nháy đơn ('')
Các cột trong mỗi hàng được xác định bên trong dấu nháy đơn, được phân tách bằng dấu cách.
Lưu ý: Dấu chấm thể hiện một mục lưới không có tên.
Thí 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 {
grid-template-areas: 'myArea myArea
. . .';
}
Để xác định hai hàng, hãy xác định cột của hàng thứ hai bên trong một tập hợp dấu nháy đơn khác:
Thí dụ
Đặt "item1" kéo dài hai cột và hai hàng:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Thí dụ
Đặt tên cho tất cả các mục và tạo một 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';
}
Thứ tự của các mặt hàng
Bố cục lưới cho phép chúng ta định vị các mục ở bất cứ đâu chúng ta muốn.
Mục đầu tiên trong mã HTML không nhất thiết phải xuất hiện dưới dạng mục đầu tiên trong lưới.
1
2
3
4
5
6
Thí dụ
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Bạn có thể sắp xếp lại thứ tự cho các kích thước màn hình nhất định, bằng cách sử dụng các truy vấn phương tiện:
Thí dụ
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}