Mục Tiêu Lưới CSS

1
2
3
4
5

Thử Nghiệm Thực Tế

Thành phần con (mục)

Container lưới chứa mục lưới.

Mặc định, container có một mục lưới ở mỗi cột của mỗi hàng, nhưng bạn có thể thiết lập樣式 cho mục lưới để chúng trải qua nhiều cột và/hoặc hàng.

Thuộc tính grid-column:

grid-column Thuộc tính xác định sẽ đặt mục ở cột nào.

Bạn có thể xác định vị trí bắt đầu và kết thúc của mục.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Mỗi cột trong hàng được định nghĩa trong dấu ngoặc kép và được phân cách bằng khoảng trống.grid-column Thuộc tính là tắt gọn của thuộc tính grid-column-start và grid-column-end.

Nếu cần đặt một mục nào đó, bạn có thể tham chiếu đến số dòng (line numbers) hoặc sử dụng từ khóa "span" để xác định mục đó sẽ trải qua bao nhiêu cột.

Mô Hình

Làm cho "item1" bắt đầu từ cột thứ 1 và kết thúc trước cột thứ 5:

Để làm cho 'myArea' chiếm hai cột trong bố cục lưới năm cột (dấu chấm đại diện cho mục không có tên):
  grid-column: 1 / 5;
}

Thử Nghiệm Thực Tế

Mô Hình

Làm cho "item1" bắt đầu từ cột thứ 1 và trải qua 3 cột:

Để làm cho 'myArea' chiếm hai cột trong bố cục lưới năm cột (dấu chấm đại diện cho mục không có tên):
  grid-column: 1 / span 3;
}

Thử Nghiệm Thực Tế

Mô Hình

Làm cho "item2" bắt đầu từ cột thứ 2 và trải qua 3 cột:

.item2 {
  grid-column: 2 / span 3;
}

Thử Nghiệm Thực Tế

Thuộc tính grid-row:

grid-row Thuộc tính này xác định mục sẽ được đặt ở hàng nào.

Bạn có thể xác định vị trí bắt đầu và kết thúc của mục.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Mỗi cột trong hàng được định nghĩa trong dấu ngoặc kép và được phân cách bằng khoảng trống.grid-row Thuộc tính này là tắt cho thuộc tính grid-row-start và grid-row-end.

Để đặt vị trí mục, bạn có thể tham chiếu đến số hàng hoặc sử dụng từ khóa "span" để xác định mục này sẽ trải qua bao nhiêu hàng:

Mô Hình

Làm cho "item1" bắt đầu từ row-line 1 và kết thúc tại row-line 4:

Để làm cho 'myArea' chiếm hai cột trong bố cục lưới năm cột (dấu chấm đại diện cho mục không có tên):
  grid-row: 1 / 4;
}

Thử Nghiệm Thực Tế

Mô Hình

Làm cho "item1" bắt đầu từ hàng thứ 1 và trải qua 2 hàng:

Để làm cho 'myArea' chiếm hai cột trong bố cục lưới năm cột (dấu chấm đại diện cho mục không có tên):
  grid-row: 1 / span 2;
}

Thử Nghiệm Thực Tế

Thuộc tính grid-area

grid-area Thuộc tính này có thể được sử dụng làm tắt cho thuộc tính grid-row-start, grid-column-start, grid-row-end và grid-column-end.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Mô Hình

Làm cho "item8" bắt đầu từ row-line 1 và column-line 2, kết thúc tại row-line 5 và column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Thử Nghiệm Thực Tế

Mô Hình

Làm cho "item8" bắt đầu từ row-line 2 và column-line, và trải qua 2 hàng và 3 cột:

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}

Thử Nghiệm Thực Tế

Đặt tên mục lưới

grid-area Thuộc tính này cũng có thể được sử dụng để分配 tên cho mục lưới.

Header
Menu
Main
Right
Footer

Có thể thông qua khung lưới của grid-template-areas Thuộc tính để tham chiếu đến mục lưới được đặt tên.

Mô Hình

Tên của item1 là "myArea" và nó trải qua tất cả năm cột của bố cục lưới năm cột:

Để làm cho 'myArea' chiếm hai cột trong bố cục lưới năm cột (dấu chấm đại diện cho mục không có tên):
  .item1 {
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Thử Nghiệm Thực Tế

每行由撇号（' '）定义。

Mỗi hàng được định nghĩa bởi dấu ngoặc kép ( ' ').

Mỗi cột trong hàng được định nghĩa trong dấu ngoặc kép và được phân cách bằng khoảng trống.Ghi chú:

Mô Hình

Dấu chấm đại diện cho mục lưới không có tên.

Để làm cho 'myArea' chiếm hai cột trong bố cục lưới năm cột (dấu chấm đại diện cho mục không có tên):
  .item1 {
}
.grid-container {
  grid-area: myArea;
}

Thử Nghiệm Thực Tế

grid-template-areas: 'myArea myArea . . .';

Mô Hình

Để định nghĩa hai hàng, hãy định nghĩa hàng thứ hai trong một nhóm dấu ngoặc kép khác:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Thử Nghiệm Thực Tế

Mô Hình

Gọi tên tất cả các mục và tạo một mẫu trang web luôn 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ử Nghiệm Thực Tế

Thứ tự của các mục

Bố cục lưới cho phép chúng ta đặt các mục ở bất kỳ vị trí nào mà chúng ta thích.

Trường hợp đầu tiên trong mã HTML không cần hiển thị là mục đầu tiên trong lưới.

1
2
3
4
5
6

Mô Hình

.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; }

Thử Nghiệm Thực Tế

Bạn có thể sắp xếp lại thứ tự một số kích thước màn hình bằng cách sử dụng truy vấn phương tiện:

Mô Hình

@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; }
}

Thử Nghiệm Thực Tế