Thuộc tính grid-area trong CSS

Khuyến nghị khóa học:

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

Thuộc tính grid-area cũng có thể được sử dụng để phân phối tên cho mục lưới. Sau đó, có thể thông qua container lưới để xác định kích thước và vị trí của mục lưới trong bố cục lưới, nó là thuộc tính tóm tắt của các thuộc tính sau: grid-template-areas Xem ví dụ dưới đây để hiểu rõ hơn về cách gọi tên các mục lưới.

Xem thêm:

Hướng dẫn CSS:Lưới CSS

Mô hình

Ví dụ 1

Để "item1" bắt đầu từ dòng 2 cột 1 và trải dài hai dòng ba cột:

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

Thử ngay

Lưu ý:Xem thêm nhiều ví dụ tại phần cuối trang.

Ngữ pháp CSS

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Giá trị thuộc tính

Giá trị Mô tả
grid-row-start Định nghĩa từ dòng nào bắt đầu hiển thị mục.
grid-column-start Định nghĩa từ cột nào bắt đầu hiển thị mục.
grid-row-end Định nghĩa điểm dừng hiển thị mục ở đường chỉ hàng nào, hoặc vượt qua bao nhiêu hàng.
grid-column-end Định nghĩa điểm dừng hiển thị mục ở đường chỉ cột nào, hoặc vượt qua bao nhiêu cột.
itemname Định nghĩa mục của phần lưới.

Chi tiết kỹ thuật

Giá trị mặc định: auto / auto / auto / auto
Di truyền: Không
Chuẩn bị animation: Hỗ trợ. Xem thêm:Các thuộc tính liên quan đến animation.
Phiên bản: Module布局 lưới CSS cấp 1
Ngôn ngữ lập trình JavaScript: object.style.gridArea="1 / 2 / span 2 / span 3"

Các ví dụ khác

Ví dụ 2

Item1 được đặt tên 'myArea' và chiếm tất cả năm cột trong布局 lưới năm cột:

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

Thử ngay

Ví dụ 3

Làm cho 'myArea' chiếm hai cột trong布局 lưới năm cột (dấu chấm đứng biểu thị mục không có tên):

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

Thử ngay

Ví dụ 4

Làm cho 'item1' chiếm hai cột và hai hàng:

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

Thử ngay

Ví dụ 5

Tên 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 {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Thử ngay

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính đó.

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