CSS grid-template-areas นิยาม
- หน้าก่อน grid-template
- หน้าต่อไป grid-template-columns
การกำหนดและวิธีใช้
รายการ grid-template-areas กำหนดพื้นที่ในการจัดเรียงเนื้อหาของแนวราย。
คุณสามารถใช้ grid-area ตั้งชื่อโครงสร้างตารางแล้วอ้างอิงชื่อนี้ในรายการ grid-template-areas。
พื้นที่แต่ละส่วนถูกกำหนดด้วยเครื่องหมายประกาศเรียกขาย (apostrophe) ใช้จุดประกาศเรียกขาย (period) ในการอ้างถึงสินค้าที่ไม่มีชื่อ
ดูเพิ่มเติมที่:
ตัวแปร CSS:CSS โครงสร้างเครือง
คู่มือ CSS:ตัวแปร grid-area
คู่มือ CSS:ตัวแปร grid-template
ตัวอย่าง
ตัวอย่าง 1
กำหนดให้โมดูล "myArea" ครอบคลุมสองคอลัมน์ในการจัดเรียงแบบเครืองห้าคอลัมน์:
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: "myArea myArea . . .";
}
ตัวอย่าง 2
กำหนดสองแถว ในที่ที่ "item1" ครอบคลุมสองคอลัมน์แรก (ในการจัดเรียงแบบเครืองห้าคอลัมน์):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas:
'myArea myArea . . .'
'myArea myArea . . .';
}
ตัวอย่าง 3
ระบุชื่อสินค้าทั้งหมด และสร้างโมดูลเว็บที่มีทรัพยากรแบบแบบฟอร์มตั้งต้น:
.item1 {
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header';
'menu main main main right right';
'menu footer footer footer footer';
}
ระบบการเขียน CSS
grid-template-areas: none|itemnames;
ค่าทางตัวเลข
| ค่า | คำอธิบาย |
|---|---|
| none | ค่าเริ่มต้น。พื้นที่เครืองที่ไม่มีชื่อ (grid areas) ที่ไม่มีชื่อ。 |
| itemnames | กำหนดลำดับที่แสดงแบบตามที่ระบุในแถวและคอลัมน์。 |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | none |
|---|---|
| การสืบทอด: | ไม่ |
| การสร้างแอนิเมชัน: | รองรับ。อ่านเพิ่มเติมที่:คุณสมบัติที่เกี่ยวกับอนุภาค。 |
| รุ่น: | CSS Grid Layout Module Level 1 |
| ระบบการเขียนเทคนิค JavaScript: | object.style.gridTemplateAreas=". . . myArea myArea" |
การรองรับโดยเบราเซอร์
ตัวเลขในตารางระบุสูตรรุ่นที่รองรับคุณสมบัตินี้อย่างเต็มที่。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- หน้าก่อน grid-template
- หน้าต่อไป grid-template-columns
