grid-template-areas
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 CSS grid-template-areas chỉ định các vùng lưới được đặt tên, thiết lập các ô trong lưới và gán tên cho chúng.
Try it
grid-template-areas:
"a a a"
"b c c"
"b c c";
grid-template-areas:
"b b a"
"b b c"
"b b c";
grid-template-areas:
"a a ."
"a a ."
". b c";
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One (a)</div>
<div>Two (b)</div>
<div>Three (c)</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, minmax(40px, auto));
grid-gap: 10px;
width: 200px;
}
#example-element :nth-child(1) {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
grid-area: a;
}
#example-element :nth-child(2) {
background-color: rgb(255 0 200 / 0.2);
border: 3px solid rebeccapurple;
grid-area: b;
}
#example-element :nth-child(3) {
background-color: rgb(94 255 0 / 0.2);
border: 3px solid green;
grid-area: c;
}
Các vùng đó không được liên kết với bất kỳ phần tử lưới cụ thể nào, nhưng có thể được tham chiếu từ các thuộc tính đặt vị trí lưới grid-row-start, grid-row-end, grid-column-start, grid-column-end, và các viết tắt grid-row, grid-column, và grid-area.
Cú pháp
/* Giá trị từ khóa */
grid-template-areas: none;
/* Giá trị <string> */
grid-template-areas: "a b";
grid-template-areas:
"a b ."
"a c d";
/* Giá trị toàn cục */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: revert;
grid-template-areas: revert-layer;
grid-template-areas: unset;
Giá trị
none-
Vùng chứa lưới không định nghĩa bất kỳ vùng lưới được đặt tên nào.
<string>-
Một hàng được tạo cho mỗi chuỗi được liệt kê riêng, và một cột được tạo cho mỗi ô trong chuỗi. Nhiều token ô có cùng tên trong và giữa các hàng tạo ra một vùng lưới được đặt tên duy nhất bao gồm các ô lưới tương ứng. Trừ khi các ô đó tạo thành một hình chữ nhật, khai báo đó không hợp lệ.
Tất cả các vùng chưa được đặt tên còn lại trong lưới có thể được tham chiếu bằng token ô null. Token ô null là một chuỗi một hoặc nhiều ký tự
.(U+002E FULL STOP), ví dụ:.,..., hoặc.....v.v. Token ô null có thể được dùng để tạo ra các khoảng trống trong lưới.
Định nghĩa hình thức
| Initial value | none |
|---|---|
| Applies to | grid containers |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
grid-template-areas =
none |
<string>+
Ví dụ
Chỉ định các vùng lưới được đặt tên
HTML
<div id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</div>
CSS
#page {
display: grid;
width: 100%;
height: 250px;
grid-template-areas:
"head head"
"nav main"
". foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head;
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
Trong đoạn code trên, một token null (.) được dùng để tạo ra một vùng không tên trong vùng chứa lưới, mà chúng ta đã dùng để tạo khoảng trống ở góc dưới bên trái của lưới.
Kết quả
Đặc tả
| Specification |
|---|
| CSS Grid Layout Module Level 2 # grid-template-areas-property |