Mục lưới CSS
1
2
3
4
5
Các phần tử con (Vật phẩm)
Một thù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 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 tính grid-column xác định (các) cột nào sẽ đặ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 tính grid-column là thuộc tính viết tắt của thuộc tính grid-column-start và grid-column-end .
Để đặt một mục, bạn có thể tham khảo số dòng hoặc sử dụng từ khóa "span" để xác định mục đó sẽ trải dài bao nhiêu cột.
Ví dụ
Đặt "item1" bắt đầu ở cột 1 và kết thúc trước cột 5:
.item1 {
grid-column: 1 / 5;
}
Ví 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;
}
Ví 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-row xác định hàng nào sẽ đặ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 tính grid-row là thuộc tính viết tắt của thuộc tính grid-row-start và grid-row-end .
Để đặt một mục, bạn có thể tham khảo số dòng hoặc sử dụng từ khóa "span" để xác định mục đó sẽ trải dài bao nhiêu hàng:
Ví dụ
Đặt "item1" bắt đầu ở dòng 1 và kết thúc ở dòng 4:
.item1 {
grid-row: 1 / 4;
}
Ví dụ
Đặt "item1" bắt đầu ở 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 tính grid-area có thể được sử dụng làm thuộc tính tốc ký cho các thuộc tính grid-row-start , grid-column-start , grid-row-end và grid-column-end .
1
2
3
4
5
6
7
số 8
9
10
11
12
13
14
15
Ví dụ
Đặt "item8" bắt đầu ở dòng hàng 1 và dòng cột 2, đồng thời kết thúc ở dòng hàng 5 và dòng cột 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Ví dụ
Đặt "item8" bắt đầu ở dòng 2 và dòng 1, đồng thời trải 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 lưới
Thuộc tính grid-area 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
Phải
Chân trang
Các mục lưới được đặt tên có thể được tham chiếu bằng thuộc tính grid-template-areas của vùng chứa lưới.
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 {
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ách nhau bằng dấu cách.
Lưu ý: Dấu chấm đại diện cho một mục lưới không có tên.
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 {
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:
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 . . .';
}
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';
}
Thứ tự của các hạng mục
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
Ví 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 truy vấn phương tiện:
Ví 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; }
}
