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

คุณสมบัติ grid-auto-columns ใช้กำหนดขนาดคอลัมน์เริ่มต้นสำหรับคอลัมน์ที่ถูกสร้างขึ้นโดยอัตโนมัติ (implicit grid columns) เมื่อมี grid items มากกว่าที่กำหนดใน grid-template-columns

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      grid-auto-columns: 100px;
      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-template-columns คอลัมน์ทั้ง 6 ตัวจะถูกสร้างเป็น implicit grid columns โดยแต่ละคอลัมน์มีความกว้าง 100px ตาม grid-auto-columns หากกำหนด grid-template-columns แล้ว คุณสมบัตินี้จะใช้กับคอลัมน์เพิ่มเติมที่ล้นมาจาก template