Thuộc tính lưới CSS

❮ Trước đó Tham chiếu CSS hoàn chỉnh Tiếp theo ❯

Thí dụ

Tạo bố cục lưới ba cột trong đó hàng đầu tiên cao 150px:

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

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

Thuộc gridtính này là một thuộc tính viết tắt cho:

Giá trị mặc định:	không không không có hàng tự động tự động
Thừa hưởng:	không
Hoạt hình:	có, hãy xem các thuộc tính riêng lẻ . Đọc về hoạt hình
Phiên bản:	Mô-đun bố cục lưới CSS cấp độ 1
Cú pháp JavaScript:	đối tượng .style.grid = "250px / auto auto auto"

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Property
grid	57	16	52	10	44

Cú pháp CSS

Giá trị tài sản

Value	Description	Play it
none	Default value. No specific sizing of the columns or rows
grid-template-rows / grid-template-columns	Specifies the size(s) of the columns and rows
grid-template-areas	Specifies the grid layout using named items
grid-template-rows / grid-auto-columns	Specifies the size (height) of the rows, and the auto size of the columns
grid-auto-rows / grid-template-columns	Specifies the auto size of the rows, and sets the grid-template-columns property
grid-template-rows / grid-auto-flow grid-auto-columns	Specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns
grid-auto-flow grid-auto-rows / grid-template-columns	Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Các ví dụ khác

Thí dụ

Chỉ định hai hàng, trong đó "item1" kéo dài hai cột đầu tiên trong 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:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Thí dụ

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

Các trang liên quan

Hướng dẫn CSS: Vùng chứa lưới CSS

Tham chiếu CSS: Thuộc tính lưới-mẫu-khu vực

Tham chiếu CSS: Thuộc tính lưới-mẫu-hàng

Tham chiếu CSS: Thuộc tính lưới-mẫu-cột

Tham chiếu CSS: Thuộc tính lưới-tự động hàng

Tham chiếu CSS: Thuộc tính lưới-cột tự động

Tham chiếu CSS: Thuộc tính lưới-dòng tự động

Tham chiếu CSS: Thuộc tính lưới-hàng-khoảng cách

Tham chiếu CSS: Thuộc tính lưới-cột-khoảng cách

❮ Trước đó Tham chiếu CSS hoàn chỉnh Tiếp theo ❯

Tham chiếu CSS

CSS Properties

Thuộc tính lưới CSS

Thí dụ

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

Hỗ trợ trình duyệt

Cú pháp CSS

Giá trị tài sản

Các ví dụ khác

Thí dụ

Thí dụ

Các trang liên quan