ตัวอย่างหน้าสามคอลัมน์สั้น ๆ

การ์ดสินค้า 3 คอลัมน์

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.product {
  /* สไตล์การ์ด — ไม่ต้อง float */
  padding: 1rem;
}
ตอนจอแคบจะปรับจำนวนคอลัมน์ด้วย media query ในบท Responsive — ตอนนี้โฟกัสโครงกริดบนกว้างก่อน

แบบฝึกปฏิบัติ

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

สร้างกริด 3 คอลัมน์ มีลูกอย่างน้อย 6 ชิ้น และ gap 1rem
ใช้ repeat(3, 1fr)
ง่าย