กลับไปหน้า Design
ทริคDesign

Grid and Alignment

ใช้กริดและการจัดแนวให้หน้าจอดูเป็นระเบียบ ไม่กระจัดกระจาย

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Grid and Alignment คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

การ์ดและกล่องวางเหลื่อมกันไปมา ดูไม่เป็นระเบียบ

อ่านแล้วทำอะไรต่อ

วางการ์ด KPI ให้แต่ละใบกว้าง 4 คอลัมน์ (สามใบต่อแถว) ขอบซ้ายขวาตรงแนวกริด พอย่อจอ การ์ดยุบเป็น 2 หรือ 1 คอลัมน์ได้โดยยังตรงแนวเสมอ

เห็นภาพ: ทริคนี้เป็นยังไง

ก่อน — วางด้วยตำแหน่งตายตัว ขอบไม่ตรงแนว
.card-a { position: absolute; left: 12px;  width: 320px; }
.card-b { position: absolute; left: 348px; width: 300px; }
.card-c { position: absolute; left: 660px; width: 340px; }
/* แต่ละใบกว้างไม่เท่ากัน gap ไม่สม่ำเสมอ ขอบเหลื่อม */
หลัง — เกาะกริด 12 คอลัมน์ gutter เท่ากัน
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.card { grid-column: span 4; } /* 3 ใบต่อแถว ขอบตรงแนวเสมอ */
การ์ดที่วางด้วยพิกัดมั่ว เทียบกับการ์ดที่เกาะแนวกริด 12 คอลัมน์

ใช้ตอนไหน?

  • การ์ดและกล่องวางเหลื่อมกันไปมา ดูไม่เป็นระเบียบ
  • ฟอร์มมีช่องกรอกขนาดไม่เท่ากัน ขอบไม่ตรงแนว
  • อยากให้หน้า layout ปรับตามขนาดจอได้อย่างเป็นระบบ

ความหมาย

กริด (grid) คือเส้นโครงสร้างที่มองไม่เห็น ใช้วางองค์ประกอบให้อยู่ในแนวเดียวกัน ส่วนการจัดแนว (alignment) คือการให้ขอบของของหลายชิ้นตรงกัน ตาคนชอบความเป็นระเบียบ พอของเรียงตรงแนวเดียว หน้าจอจะดูสะอาดและน่าเชื่อถือขึ้นทันที

กริดและการจัดแนว

เลือกจำนวนคอลัมน์ของกริด (เช่น 12 คอลัมน์บนเดสก์ท็อป) ให้ของทุกชิ้นเกาะแนวคอลัมน์ และจัดขอบให้ตรงกันเป็นเส้นเดียว ใช้ระยะห่าง (gutter) สม่ำเสมอ

/* CSS Grid 12 คอลัมน์ */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px; /* gutter สม่ำเสมอ */
}
.card { grid-column: span 4; } /* การ์ดกว้าง 4 คอลัมน์ */

ตัวอย่างการใช้

หน้าแดชบอร์ด 12 คอลัมน์

วางการ์ด KPI ให้แต่ละใบกว้าง 4 คอลัมน์ (สามใบต่อแถว) ขอบซ้ายขวาตรงแนวกริด พอย่อจอ การ์ดยุบเป็น 2 หรือ 1 คอลัมน์ได้โดยยังตรงแนวเสมอ