CSS Grid Item

1
2
3
4
5

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

องค์ประกอบลูก (โครงการ)

ตัวจัดเก็บกริดมีโครงการ。

โดยมาตรฐาน ตัวจัดเก็บมีโครงการตัวหนึ่งในแต่ละคอลัมน์ของแต่ละบรรทัด แต่คุณสามารถตั้งรูปแบบของโครงการให้ข้ามหลายคอลัมน์และ/หรือบรรทัดเพิ่มเติม。

grid-column property:

grid-column property นี้กำหนดที่จะจัดตั้งโครงการในคอลัมน์ไหน。

คุณสามารถกำหนดตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุดของโครงการ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

หมายเหตุ：grid-column คุณจะใช้ property ที่เรียกว่า grid-column-start และ grid-column-end ในรูปแบบที่ย่อ.

ถ้าคุณต้องการที่จะจัดตั้งโครงการใด คุณสามารถอ้างอิงเลขบรรทัด (line numbers) หรือใช้คำนำทาง "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 attribute:

grid-row attribute กำหนดที่จะจัดทำโครงการในแถวไหน

คุณสามารถกำหนดตำแหน่งเริ่มต้นและตำแหน่งสิ้นสุดของโครงการ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

หมายเหตุ：grid-row attribute คือ attribute ฉับยากของ grid-row-start และ grid-row-end

หากต้องการที่จะจัดทำโครงการ คุณสามารถอ้างอิงเลขแถว หรือใช้คำกำหนดด้วย keyword "span" ในการกำหนดโครงการที่จะเคลื่อนตัวระหว่างเพียงใดนับแถว:

ตัวอย่าง

ทำให้ "item1" เริ่มจาก row-line 1 และสิ้นสุดที่ row-line 4:

.item1 {
  grid-row: 1 / 4;
}

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

ตัวอย่าง

ทำให้ "item1" เริ่มจากแถวที่ 1 และเคลื่อนตัวระหว่าง 2 แถว:

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

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

grid-area attribute

grid-area attribute สามารถใช้เป็น attribute ฉับยากของ 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" เริ่มจาก row-line 1 และ column-line 2 และสิ้นสุดที่ row-line 5 และ column line 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

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

ตัวอย่าง

ทำให้ "item8" เริ่มจาก row-line 2 และ column-line และเคลื่อนตัวระหว่าง 2 แถวและ 3 คอลัมน์:

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

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

ตัวโครงรูปตารางชื่อ

grid-area attribute ก็สามารถใช้เพื่อแบ่งชื่อโครงรูปตารางตัว

Header
Menu
Main
Right
Footer

สามารถใช้ grid container grid-template-areas attribute ใช้เรียกหน้าที่ของโครงรูปตารางตัวที่มีชื่อ

ตัวอย่าง

item1 ชื่อว่า "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; }
}

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