การใช้งานคุณสมบัติ CSS grid-auto-flow

คุณสมบัติ grid-auto-flow ควบคุมอัลกอริทึมการวางไอเท็มอัตโนมัติ (auto-placement algorithm) ใน CSS Grid เมื่อไอเท็มไม่ได้ถูกจัดตำแหน่งอย่างชัดเจนด้วย grid-area หรือ line-based placement

ค่าที่ใช้ได้

• row (default): เติมแถวก่อน แล้วค่อยขยับไปคอลัมน์ถัดไป
• column: เติมคอลัมน์ก่อน แล้วค่อยขยับไปแถวถัดไป
• dense: พยายามเติมช่องว่างให้แน่นที่สุด (อาจทำให้ลำดับไอเท็มสลับกัน)
• row dense / column dense: รวมทั้งสองโหมด

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-auto-columns: 50px;
      grid-auto-flow: column;  /* เติมแนวนอนก่อน */
      grid-gap: 10px;
      background-color: red;
      padding: 10px;
    }
    .container > div {
      background-color: yellow;
      text-align: center;
      padding: 10px 0;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

คำอธิบาย: ด้วย grid-auto-flow: column ไอเท็ม 6 ตัวจะวางต่อกันในแนวนอน (1 แถว 6 คอลัมน์) แทนที่จะวางในแนวตั้ง (6 แถว 1 คอลัมน์) ตามค่าเริ่มต้น