CSS ความหลากหลายgrid-auto-flow

คำนิยามและวิธีใช้

grid-auto-flow คุณสมบัติควบคุมวิธีการที่โปรแกรมที่ถูกปล่อยอัตโนมัติจะถูกใส่ในกริด。

ดูเพิ่มเติม:

เรื่องเรียน CSS:CSS Grid Layout

ตัวอย่าง

ตัวอย่าง 1

ประสานงานโปรแกรมที่ถูกปล่อยให้เข้ารหัสอัตโนมัติแบบคอลัมน์:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

ลองเอง

ตัวอย่าง 2

กระจายทุกช่องว่างในกริดด้วยการเพิ่มค่า "dense":

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

ลองเอง

การเขียน CSS

grid-auto-flow: row|column|dense|row dense|column dense;

ค่าคุณสมบัติ

ค่า คำอธิบาย
row ค่าเริ่มต้น。จัดทำสิ่งของด้วยการกระจายในแต่ละแถว。
column จัดทำสิ่งของด้วยการกระจายในแต่ละคอลัมน์。
dense จัดทำสิ่งของเพื่อกระจายในช่องว่างของกริด。
row dense จัดทำสิ่งของด้วยการกระจายในแต่ละแถวและกระจายในช่องว่างของกริด。
column dense จัดทำสิ่งของด้วยการกระจายในแต่ละคอลัมน์และกระจายในช่องว่างของกริด。

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: row
สืบทอด: ไม่
การสร้างอนุรักษ์: สนับสนุน。โปรดดู:คุณสมบัติที่เกี่ยวกับอนุรักษ์。
เวอร์ชัน: CSS Grid Layout Module Level 1
การเขียนโปรแกรม JavaScript: object.style.gridAutoFlow="row dense"

การรองรับโปรแกรมนำทาง

ตารางหลักค่าเลขระบุการรองรับเวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44