CSS Grid Gaps

ช่องว่างระหว่างแถวและคอลัมน์ใน CSS Grid เรียกว่า Grid Gaps สามารถกำหนดได้ด้วยคุณสมบัติ grid-gap, grid-row-gap, grid-column-gap หรือ shorthand gap

การใช้งาน

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;           /* shorthand สำหรับ row-gap และ column-gap */
  /* หรือแยกได้ */
  row-gap: 20px;
  column-gap: 20px;
}

Grid Gaps ช่วยสร้างระยะห่างระหว่าง grid items โดยไม่ต้องใช้ margin บน items เอง ทำให้ layout สะอาดและควบคุมง่ายกว่า