รายการ CSS Grid
1
2
3
4
5
องค์ประกอบย่อย (รายการ)
คอนเทนเนอร์กริดประกอบด้วยรายการกริด
ตามค่าเริ่มต้น คอนเทนเนอร์จะมีรายการกริดหนึ่งรายการสำหรับแต่ละคอลัมน์ ในแต่ละแถว แต่คุณสามารถจัดสไตล์รายการกริดเพื่อให้รายการเหล่านั้นขยายหลายคอลัมน์และ/หรือหลายแถว
คุณสมบัติกริดคอลัมน์:
คุณสมบัติgrid-columnกำหนดคอลัมน์ที่จะวางรายการ
คุณกำหนดตำแหน่งที่รายการจะเริ่มต้น และตำแหน่งที่รายการจะสิ้นสุด
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
หมายเหตุ:คุณสมบัติgrid-columnเป็นคุณสมบัติชวเลขสำหรับgrid-column-startและgrid-column-endคุณสมบัติ
ในการวางรายการ คุณสามารถอ้างถึงหมายเลขบรรทัดหรือใช้คำหลัก "span" เพื่อกำหนดจำนวนคอลัมน์ที่จะขยายรายการ
ตัวอย่าง
ทำให้ "item1" เริ่มต้นที่คอลัมน์ 1 และสิ้นสุดก่อนคอลัมน์ 5:
.item1 {
grid-column: 1 / 5;
}
ตัวอย่าง
ทำให้ "item1" เริ่มต้นในคอลัมน์ 1 และขยาย 3 คอลัมน์:
.item1 {
grid-column: 1 / span 3;
}
ตัวอย่าง
ทำให้ "item2" เริ่มต้นในคอลัมน์ 2 และขยาย 3 คอลัมน์:
.item2 {
grid-column: 2 / span 3;
}
คุณสมบัติ grid-row:
คุณสมบัติgrid-rowกำหนดแถวที่จะวางรายการ
คุณกำหนดตำแหน่งที่รายการจะเริ่มต้น และตำแหน่งที่รายการจะสิ้นสุด
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
หมายเหตุ:คุณสมบัติgrid-rowเป็นคุณสมบัติชวเลขสำหรับgrid-row-startและgrid-row-endคุณสมบัติ
ในการวางรายการ คุณสามารถอ้างถึงหมายเลขบรรทัดหรือใช้คำหลัก "span" เพื่อกำหนดจำนวนแถวที่จะขยายรายการ:
ตัวอย่าง
ทำให้ "item1" เริ่มต้นที่แถวบรรทัดที่ 1 และสิ้นสุดที่แถวบรรทัด 4:
.item1 {
grid-row: 1 / 4;
}
ตัวอย่าง
ทำให้ "item1" เริ่มต้นที่แถว 1 และขยาย 2 แถว:
.item1 {
grid-row: 1 / span 2;
}
ทรัพย์สินพื้นที่กริด
คุณสมบัติgrid-areaสามารถใช้เป็นคุณสมบัติชวเลขสำหรับ
grid-row-start, grid-column-start, grid-row-endและgrid-column-endคุณสมบัติ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ตัวอย่าง
ทำให้ "item8" เริ่มต้นที่แถวบรรทัดที่ 1 และคอลัมน์บรรทัดที่ 2 และสิ้นสุดที่แถวบรรทัดที่ 5 และแถวที่ 6:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
ตัวอย่าง
ทำให้ "item8" เริ่มต้นที่แถวบรรทัดที่ 2 และคอลัมน์บรรทัดที่ 1 และขยาย 2 แถวและ 3 คอลัมน์:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
การตั้งชื่อรายการกริด
คุณสมบัติgrid-areaนี้ยังสามารถใช้เพื่อกำหนดชื่อให้กับรายการกริด
หัวข้อ
เมนู
หลัก
ถูกต้อง
ส่วนท้าย
รายการกริดที่มีชื่อสามารถอ้างถึงโดยgrid-template-areasคุณสมบัติของคอนเทนเนอร์กริด
ตัวอย่าง
รายการที่ 1 ได้รับชื่อ "myArea" และครอบคลุมทั้งห้าคอลัมน์ในรูปแบบกริดห้าคอลัมน์:
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
แต่ละแถวถูกกำหนดโดยเครื่องหมายอะพอสทรอฟี (' ')
คอลัมน์ในแต่ละแถวถูกกำหนดไว้ภายในเครื่องหมายอะพอสทรอฟี โดยคั่นด้วยช่องว่าง
หมายเหตุ:เครื่องหมายรอบระยะเวลาแสดงถึงรายการกริดที่ไม่มีชื่อ
ตัวอย่าง
ให้ "myArea" ขยายสองคอลัมน์ในเค้าโครงตารางห้าคอลัมน์ (เครื่องหมายช่วงเวลาแสดงรายการที่ไม่มีชื่อ):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
ในการกำหนดสองแถว ให้กำหนดคอลัมน์ของแถวที่สองภายในชุดของอะพอสทรอฟีอื่น:
ตัวอย่าง
ทำให้ "item1" ครอบคลุมสองคอลัมน์และสองแถว:
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
ตัวอย่าง
ตั้งชื่อรายการทั้งหมด และสร้างเทมเพลตหน้าเว็บที่พร้อมใช้งาน:
.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';
}
ลำดับของรายการ
เลย์เอาต์กริดช่วยให้เราสามารถวางตำแหน่งไอเท็มได้ทุกที่ที่เราต้องการ
รายการแรกในโค้ด HTML ไม่จำเป็นต้องปรากฏเป็นรายการแรกในกริด
1
2
3
4
5
6
ตัวอย่าง
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
คุณสามารถจัดเรียงลำดับใหม่สำหรับหน้าจอบางขนาดได้โดยใช้คิวรีสื่อ:
ตัวอย่าง
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}