grid-area

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

Thuộc tính grid-area CSS là thuộc tính viết tắt dùng để chỉ định kích thước và vị trí của một phần tử lưới bên trong lưới bằng cách đóng góp một đường, một khoảng mở rộng (span), hoặc không có gì (tự động) vào vị trí lưới của nó, từ đó xác định các cạnh của vùng lưới tương ứng.

Try it

grid-area: a;

grid-area: b;

grid-area: c;

grid-area: 2 / 1 / 2 / 4;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Example</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-template-areas:
    "a a a"
    "b c c"
    "b c c";
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Nếu bốn giá trị <grid-line> được chỉ định, grid-row-start được đặt thành giá trị đầu tiên, grid-column-start được đặt thành giá trị thứ hai, grid-row-end được đặt thành giá trị thứ ba, và grid-column-end được đặt thành giá trị thứ tư.

Khi grid-column-end bị bỏ qua, nếu grid-column-start là <custom-ident>, thì grid-column-end được đặt thành <custom-ident> đó; ngược lại, nó được đặt thành auto.

Khi grid-row-end bị bỏ qua, nếu grid-row-start là một <custom-ident>, thì grid-row-end được đặt thành <custom-ident> đó; ngược lại, nó được đặt thành auto.

Khi grid-column-start bị bỏ qua, nếu grid-row-start là một <custom-ident>, tất cả bốn thuộc tính thành phần đều được đặt thành giá trị đó. Ngược lại, nó được đặt thành auto.

Thuộc tính grid-area cũng có thể được đặt thành một <custom-ident> đóng vai trò là tên cho vùng lưới, sau đó có thể được đặt vị trí bằng cách sử dụng grid-template-areas.

Thuộc tính thành phần

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

Cú pháp

css

/* Giá trị từ khóa */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* Giá trị <custom-ident> */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;

/* Giá trị <integer> && <custom-ident>? */
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;

/* Giá trị span && [ <integer> || <custom-ident> ] */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;

/* Giá trị toàn cục */
grid-area: inherit;
grid-area: initial;
grid-area: revert;
grid-area: revert-layer;
grid-area: unset;

Giá trị

auto

Là từ khóa cho biết thuộc tính không đóng góp gì vào vị trí của phần tử lưới, cho biết tự động đặt vị trí hoặc khoảng mở rộng mặc định là 1.

<custom-ident>

Nếu có một đường được đặt tên với tên <custom-ident>-start hoặc <custom-ident>-end, nó đóng góp đường đầu tiên như vậy vào vị trí của phần tử lưới.

Note: Các vùng lưới được đặt tên tự động tạo ra các đường được đặt tên ẩn theo dạng này, vì vậy việc chỉ định grid-area: foo; sẽ chọn cạnh bắt đầu/kết thúc của vùng lưới được đặt tên đó (trừ khi một đường khác có tên foo-start/foo-end được chỉ định rõ ràng trước đó).

Ngược lại, điều này được xử lý như thể số nguyên 1 đã được chỉ định cùng với <custom-ident>.

<integer> && <custom-ident>?

Đóng góp đường lưới thứ n vào vị trí của phần tử lưới. Nếu một số nguyên âm được cho, nó sẽ đếm ngược, bắt đầu từ cạnh kết thúc của lưới tường minh.

Nếu một tên được cho dưới dạng <custom-ident>, chỉ các đường có tên đó mới được tính. Nếu không đủ đường có tên đó tồn tại, tất cả các đường lưới ẩn được giả định có tên đó để tìm vị trí này.

Giá trị <integer> là 0 không hợp lệ.

span && [ <integer> || <custom-ident> ]

Đóng góp một khoảng mở rộng lưới vào vị trí của phần tử lưới sao cho cạnh tương ứng của vùng lưới của phần tử đó cách n đường so với cạnh đối diện.

Nếu một tên được cho dưới dạng <custom-ident>, chỉ các đường có tên đó mới được tính. Nếu không đủ đường có tên đó tồn tại, tất cả các đường lưới ẩn ở phía của lưới tường minh tương ứng với hướng tìm kiếm được giả định có tên đó để đếm khoảng mở rộng này.

Nếu <integer> bị bỏ qua, nó mặc định là 1. Số nguyên âm hoặc 0 không hợp lệ.

Định nghĩa hình thức

Initial value	as each of the properties of the shorthand: `grid-row-start`: `auto` `grid-column-start`: `auto` `grid-row-end`: `auto` `grid-column-end`: `auto`
Applies to	grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited	no
Computed value	as each of the properties of the shorthand: `grid-row-start`: as specified `grid-column-start`: as specified `grid-row-end`: as specified `grid-column-end`: as specified
Animation type	discrete

Cú pháp hình thức

grid-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]   

<integer> = 
  <number-token>

Ví dụ

Đặt vùng lưới

HTML

html

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

css

#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

Kết quả

Đặc tả

Specification
CSS Grid Layout Module Level 2 # propdef-grid-area

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content