Thuộc tính grid trong CSS

trang trước gap
Trang tiếp theo grid-area

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

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

Xin xem thêm:

Mô hình

Ví dụ 1

Tạo một bố cục lưới ba cột, trong đó dòng đầu tiên cao 150 pixel:

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

Thử ngay

Ví dụ 2

Định nghĩa hai dòng, trong đó 'item1' trải qua hai cột trước của hai dòng đầu tiên (sử dụng bố cục lưới năm cột):

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

Thử ngay

Ví dụ 3

Gọi 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 {
  display: grid;
  grid:
    header header header header header
    'menu main main main right right'
    'menu footer footer footer footer';
}

Thử ngay

Cú pháp CSS

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns[grid-auto-flow] grid-auto-rows / grid-template-columns|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 hàng hoặc cột.
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 tên phần tử để tạo cấu trúc lưới.
grid-template-rows / grid-auto-columns	Định nghĩa kích thước (chiều cao) của hàng và kích thước tự động của cột.
grid-auto-rows / grid-template-columns	Định nghĩa kích thước tự động của hàng và đặt thuộc tính grid-template-columns.
grid-template-rows / grid-auto-flow grid-auto-columns	Định nghĩa kích thước (chiều cao) của hàng và cách đặt các phần tử tự động đặt và kích thước tự động của cột.
grid-auto-flow grid-auto-rows / grid-template-columns	Định nghĩa cách đặt các phần tử tự động đặt và kích thước tự động của hàng, và đặt thuộc tính grid-template-columns.
initial	Đặt thuộc tính này thành giá trị mặc định. Xin xem thêm initial.
inherit	Kế thừa thuộc tính này từ phần tử cha. Xin xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	none none none auto auto row
Kế thừa:	Không
Tạo animation:	Có, xem các thuộc tính cá nhân. Xin xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	CSS Grid Layout Module Level 1
Cú pháp JavaScript:	object.style.grid="250px / auto auto auto"