Thuộc tính CSS grid-template

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

Thuộc tính grid-template là thuộc tính viết tắt của các thuộc tính sau:

Xin xem thêm:

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

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

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

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

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

Mô hình

Ví dụ 1

Tạo bố cục lưới ba cột cao 150 pixel cho cột đầu tiên:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Thử nghiệm trực tiếp

Ví dụ 2

Định nghĩa hai hàng, trong đó "item1" chiếm hai cột đầu tiên của hai hàng đầu tiên (trong bố cục lưới năm cột):

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

Thử nghiệm trực tiếp

Ví dụ 3

Đặt tên cho tất cả các mục, sau đó 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:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Thử nghiệm trực tiếp

Ngữ pháp CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Giá trị thuộc tính
Giá trị Mô tả
none Giá trị mặc định. Không định nghĩa kích thước của cột hoặc hàng.
grid-template-rows / grid-template-columns Định nghĩa kích thước của cột và hàng.
grid-template-areas Định nghĩa sử dụng bố cục lưới bằng cách đặt tên cho các mục.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: none none 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: Mô đun Thiết kế Lưới CSS Grid Level 1
Ngữ pháp JavaScript: object.style.gridTemplate = "250px / auto auto"

Hỗ trợ trình duyệt

Số 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