CSS grid-area

การกำหนดและการใช้งาน

คุณสมบัติ grid-area ของรายการเครือง มีขนาดและตำแหน่งในรูปแบบเครือง ซึ่งเป็นคุณสมบัติสั้นๆ ของคุณสมบัติต่อไปนี้:

คุณสมบัติ grid-area ยังสามารถใช้เพื่อแบ่งชนะชื่อแก่รายการเครืองได้ หลังจากนั้น สามารถใช้ grid-template-areas อ้างอิงคุณสมบัติของรายการเครือง โปรดดูตัวอย่างด้านล่าง。

ดูเพิ่มเติมที่：

CSS คู่มือ：CSS รูปแบบเครือง

ตัวอย่าง

ตัวอย่าง 1

ทำให้ "item1" ตั้งที่บรรทัด 2 คอลัมน์ 1 และขยายเป็น 2 บรรทัด 3 คอลัมน์:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
{}

ทดลองด้วยตัวเอง

คำเตือน：มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า。

CSS การเขียน

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

ค่าของคุณสมบัติ

ค่า รายละเอียด
grid-row-start ระบุจากบรรทัดที่ไหนเริ่มแสดงรายการ。
grid-column-start ระบุจากคอลัมน์ที่ไหนเริ่มแสดงรายการ。
grid-row-end กำหนดจุดที่หยุดแสดงโครงการในช่องบรรจุที่ใด หรือข้างหลังกี่บรรทัด
grid-column-end กำหนดจุดที่หยุดแสดงโครงการในช่องบรรจุที่ใด หรือข้างหลังกี่คอลัมน์
itemname กำหนดหน่วยงานสำหรับรูปแบบแบ่งพื้นที่เน็ต

รายละเอียดเทคนิค

ค่าเริ่มต้น： auto / auto / auto / auto
ตามระบบ ไม่
การสร้างแอนิเมชัน： สนับสนุน。ดูเพิ่มเติมที่：คุณสมบัติที่เกี่ยวกับอนุรักษ์。
เวอร์ชัน： CSS Grid Layout Module Level 1
การเขียน JavaScript object.style.gridArea="1 / 2 / span 2 / span 3"

ตัวอย่างเพิ่มเติม

ตัวอย่าง 2

Item1 ถูกตั้งชื่อ 'myArea' และข้างหลังสองคอลัมน์ในต้นรูปแบบเกาะทั้งห้าคอลัมน์

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

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ทำให้ 'myArea' ข้างหลังสองคอลัมน์ในต้นรูปแบบเกาะทั้งห้าคอลัมน์ (จุดประกายหมายถึงโครงการที่ไม่มีชื่อ)

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

ทดลองด้วยตัวเอง

ตัวอย่าง 4

ทำให้ 'item1' ข้างหลังสองคอลัมน์และสองบรรทัด

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
{}

ทดลองด้วยตัวเอง

ตัวอย่าง 5

ตั้งชื่อหน่วยงานทั้งหมด และสร้างแม่บทเว็บที่พร้อมใช้งาน

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
{}

ทดลองด้วยตัวเอง

การสนับสนุนโบรว์เซอร์

ตารางเลขนั้นระบุสำหรับการสนับสนุนอย่างเต็มที่ของตัวแบบไบร์วเซอร์ครั้งแรกที่สนับสนุนคุณสมบัตินี้。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44