Thuộc tính CSS grid-template-areas

Định nghĩa và cách sử dụng

Thuộc tính grid-template-areas xác định khu vực trong bố cục lưới.

Bạn có thể sử dụng grid-area Đặt tên cho mục lưới, sau đó tham chiếu tên đó trong thuộc tính grid-template-areas.

Mỗi khu vực được định nghĩa bởi dấu撇. Sử dụng dấu chấm để trích dẫn mục lưới không có tên.

Xem thêm:

Hướng dẫn CSS:Mục CSS lưới

Hướng dẫn CSS:Thuộc tính grid-area

Hướng dẫn CSS:Thuộc tính grid-template

Mô hình

Ví dụ 1

Đặt tên cho mục "myArea" trải ngang hai 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 . . .";
}

Thử ngay

Ví dụ 2

Định nghĩa hai hàng, trong đó "item1" trải ngang hai cột đầu tiên trong hai hàng đầu (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 . . .';
}

Thử ngay

Ví dụ 3

Đặt tên cho tất cả các mục và tạo một mẫu trang web sẵn sà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-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Thử ngay

Ngữ pháp CSS

grid-template-areas: none|itemnames;

Giá trị thuộc tính

Giá trị Mô tả
none Giá trị mặc định. Khu vực lưới không có tên (grid areas).
itemnames Định nghĩa cách hiển thị từng cột và từng hàng.

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: Không
Chế tạo animation: Hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS Grid Layout Module Level 1
Ngữ pháp JavaScript: object.style.gridTemplateAreas=". . . myArea myArea"

Hỗ trợ trình duyệt

Số liệu trong bảng đã chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44