CSS Grid Layout Module
หัวข้อ
เมนู
หลัก
ถูกต้อง
ส่วนท้าย
เค้าโครงกริด
CSS Grid Layout Module มีระบบเลย์เอาต์แบบกริดที่มีแถวและคอลัมน์ ทำให้ง่ายต่อการออกแบบหน้าเว็บโดยไม่ต้องใช้ทศนิยมและการวางตำแหน่ง
รองรับเบราว์เซอร์
คุณสมบัติกริดได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด
| 57.0 | 16.0 | 52.0 | 10 | 44 |
องค์ประกอบกริด
เค้าโครงกริดประกอบด้วยองค์ประกอบหลัก โดยมีองค์ประกอบย่อยอย่างน้อยหนึ่งรายการ
ตัวอย่าง
<div
class="grid-container">
<div class="grid-item">1</div>
<div
class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div
class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div
class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
แสดงทรัพย์สิน
องค์ประกอบ HTML จะกลายเป็นคอนเทนเนอร์กริดเมื่อ ตั้ง ค่าdisplayคุณสมบัติเป็น
gridหรือinline-grid
ตัวอย่าง
.grid-container {
display: grid;
}
ตัวอย่าง
.grid-container {
display: inline-grid;
}
ลูกโดยตรงทั้งหมดของคอนเทนเนอร์กริดจะกลายเป็นรายการกริด โดย อัตโนมัติ
คอลัมน์กริด
เส้นแนวตั้งของรายการกริดเรียกว่าคอลัมน์
แถวกริด
เส้นแนวนอนของรายการกริดเรียกว่าแถว
ช่องว่างของกริด
ช่องว่างระหว่างแต่ละคอลัมน์/แถวเรียกว่าgap
คุณสามารถปรับขนาดช่องว่างได้โดยใช้คุณสมบัติอย่างใดอย่างหนึ่งต่อไปนี้:
grid-column-gapgrid-row-gapgrid-gap
ตัวอย่าง
คุณสมบัติgrid-column-gapกำหนดช่องว่างระหว่างคอลัมน์:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
ตัวอย่าง
คุณสมบัติgrid-row-gapกำหนดช่องว่างระหว่างแถว:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
ตัวอย่าง
grid-gapทรัพย์สินเป็นทรัพย์สินชวเลขสำหรับ
และgrid-row-gapคุณสมบัติ
grid-column-gap:
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
ตัวอย่าง
คุณสมบัติgrid-gapนี้ยังสามารถใช้เพื่อตั้งค่าทั้งช่องว่างแถวและช่องว่างของคอลัมน์ในค่าเดียว:
.grid-container {
display: grid;
grid-gap: 50px;
}
เส้นกริด
เส้นระหว่างคอลัมน์เรียกว่าเส้นคอลัมน์
เส้นระหว่างแถวเรียกว่าเส้นแถว
อ้างถึงหมายเลขบรรทัดเมื่อวางรายการกริดในคอนเทนเนอร์กริด:
ตัวอย่าง
วางรายการกริดที่คอลัมน์บรรทัดที่ 1 และปล่อยให้สิ้นสุดในคอลัมน์บรรทัดที่ 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
ตัวอย่าง
วางรายการกริดที่แถวบรรทัดที่ 1 และปล่อยให้สิ้นสุดในแถวที่ 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
คุณสมบัติกริด CSS ทั้งหมด
| Property | Description |
|---|---|
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| row-gap | Specifies the gap between the grid rows |