คอนเทนเนอร์กริด CSS
1
2
3
4
5
6
7
8
คอนเทนเนอร์กริด
ในการทำให้องค์ประกอบ HTML ทำงานเป็นคอนเทนเนอร์กริด คุณต้องตั้งค่าdisplayคุณสมบัติเป็น
gridหรือinline-grid
คอนเทนเนอร์กริดประกอบด้วยรายการกริด วางอยู่ภายในคอลัมน์และแถว
ตารางเทมเพลตคอลัมน์คุณสมบัติ
คุณสมบัติgrid-template-columnsกำหนดจำนวนคอลัมน์ในรูปแบบกริดของคุณ และสามารถกำหนดความกว้างของแต่ละคอลัมน์ได้
ค่านี้เป็นรายการที่คั่นด้วยช่องว่าง โดยที่แต่ละค่ากำหนดความกว้างของคอลัมน์ที่เกี่ยวข้อง
หากคุณต้องการให้เค้าโครงกริดของคุณมี 4 คอลัมน์ ให้ระบุความกว้างของ 4 คอลัมน์ หรือ "อัตโนมัติ" หากคอลัมน์ทั้งหมดควรมีความกว้างเท่ากัน
ตัวอย่าง
สร้างตารางด้วย 4 คอลัมน์:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
หมายเหตุ:ถ้าคุณมีมากกว่า 4 รายการในตาราง 4 คอลัมน์ ตารางจะเพิ่มแถวใหม่โดยอัตโนมัติเพื่อใส่รายการ
คุณสมบัติgrid-template-columnsนี้ยังสามารถใช้เพื่อระบุขนาด (ความกว้าง) ของคอลัมน์
ตัวอย่าง
กำหนดขนาดสำหรับ 4 คอลัมน์:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
คุณสมบัติกริดเทมเพลตแถว
คุณสมบัติกำหนด ความgrid-template-rowsสูงของแต่ละแถว
1
2
3
4
5
6
7
8
ค่านี้เป็นรายการที่คั่นด้วยช่องว่าง โดยที่แต่ละค่ากำหนดความสูงของแถวที่เกี่ยวข้อง:
ตัวอย่าง
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
คุณสมบัติเนื้อหาที่สมเหตุสมผล
คุณสมบัติjustify-contentนี้ใช้เพื่อจัดแนวกริดทั้งหมดภายในคอนเทนเนอร์
1
2
3
4
5
6
หมายเหตุ:ความกว้างรวมของกริดต้องน้อยกว่าความกว้างของคอนเทนเนอร์เพื่อให้justify-contentคุณสมบัติมีผล
ตัวอย่าง
.grid-container {
display: grid;
justify-content: space-evenly;
}
ตัวอย่าง
.grid-container {
display: grid;
justify-content: space-around;
}
ตัวอย่าง
.grid-container {
display: grid;
justify-content: space-between;
}
ตัวอย่าง
.grid-container {
display: grid;
justify-content: center;
}
ตัวอย่าง
.grid-container {
display: grid;
justify-content: start;
}
ตัวอย่าง
.grid-container {
display: grid;
justify-content: end;
}
คุณสมบัติการจัดตำแหน่งเนื้อหา
คุณสมบัติalign-contentนี้ใช้เพื่อ จัด
แนวกริดทั้งหมดภายในคอนเทนเนอร์ใน แนวตั้ง
1
2
3
4
5
6
หมายเหตุ:ความสูงรวมของกริดต้องน้อยกว่าความสูงของคอนเทนเนอร์เพื่อให้align-contentคุณสมบัติมีผล
ตัวอย่าง
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
ตัวอย่าง
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
ตัวอย่าง
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
ตัวอย่าง
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
ตัวอย่าง
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
ตัวอย่าง
.grid-container {
display: grid;
height: 400px;
align-content: end;
}