คุณสมบัติCSS grid-auto-flow
ตัวอย่าง
แทรกรายการที่วางอัตโนมัติทีละคอลัมน์:
.grid-container {
display: grid;
grid-auto-flow:
column;
}
ความหมายและการใช้งาน
คุณสมบัติgrid-auto-flow
ควบคุมวิธีการแทรกรายการที่วางอัตโนมัติในกริด
ค่าเริ่มต้น: | แถว |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS Grid Layout Module ระดับ 1 |
ไวยากรณ์ JavaScript: | วัตถุ .style.gridAutoFlow="แถวหนาแน่น" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
grid-auto-flow | 57 | 16 | 52 | 10 | 44 |
ไวยากรณ์ CSS
grid-auto-flow:
row|column|dense|row dense|column dense;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
row | Default value. Places items by filling each row | |
column | Places items by filling each column | |
dense | Place items to fill any holes in the grid | |
row dense | Places items by filling each row, and fill any holes in the grid | |
column dense | Places items by filling each column, and fill any holes in the grid |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เติมรูในกริดโดยเพิ่มค่า "หนาแน่น":
.grid-container {
display: grid;
grid-auto-flow: row
dense;
}
หน้าที่เกี่ยวข้อง
บทช่วยสอน CSS: เค้าโครงตาราง CSS