gap — ระยะห่างระหว่างช่อง
ทำไมไม่ใช้ margin อย่างเดียว
gap เว้นช่องระหว่างแทร็กโดยไม่ดันขอบนอกของกริดทั้งก้อนแบบที่ margin ของ item มักทำ
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem; /* ทั้งแถวและคอลัมน์ */
/* หรือแยก: row-gap / column-gap */
row-gap: 1.5rem;
column-gap: 1rem;
}
เทคนิค: เริ่มจาก
gap ก่อน ค่อยเติม margin ที่ item เมื่อต้องการระยะพิเศษเฉพาะชิ้น