CSS Grid vs Flexbox

CSS Grid vs Flexbox

ระบบ layout 1 มิติ เหมาะสำหรับจัดวางในแถวหรือคอลัมน์ — เลือกใช้ให้ถูกเครื่องมือ ได้โค้ดที่สั้นกว่าและ maintain ง่ายกว่า

ทำความเข้าใจความแตกต่าง

// Flexbox — จัดวาง 1 มิติ (แถว หรือ คอลัมน์)
// Grid   — จัดวาง 2 มิติ (แถว และ คอลัมน์ พร้อมกัน)

Flexbox: [item][item][item]  →  แนวนอน
         [item]              ↓  แนวตั้ง

Grid:    [item][item][item]
         [item][item][item]  ← ควบคุมได้ทั้ง 2 แกน

เลือกใช้อะไรดี?

Flexbox จัดวางใน 1 แนว เช่น Navbar, Button group, Card row

Grid จัดวาง layout ใหญ่ เช่น Page layout, Gallery, Dashboard

ใช้คู่กัน Grid จัดโครงสร้างหน้า Flexbox จัดของข้างใน

Flexbox — พื้นฐานที่ต้องรู้

.container {
  display: flex;

  /* ทิศทางหลัก */
  flex-direction: row;           /* → แนวนอน (default) */
  flex-direction: column;        /* ↓ แนวตั้ง */

  /* จัดวางแกนหลัก */
  justify-content: flex-start;   /* ชิดซ้าย */
  justify-content: center;       /* กึ่งกลาง */
  justify-content: space-between; /* กระจาย */

  /* จัดวางแกนรอง */
  align-items: stretch;          /* ยืดเต็มความสูง (default) */
  align-items: center;           /* กึ่งกลางแนวตั้ง */

  gap: 16px;                     /* ระยะห่างระหว่าง item */
}

ตัวอย่าง Flexbox — Navbar

/* ✓ Flexbox เหมาะมากสำหรับ Navbar */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 60px;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

CSS Grid — พื้นฐานที่ต้องรู้

.container {
  display: grid;

  /* กำหนดคอลัมน์ */
  grid-template-columns: 1fr 1fr 1fr;    /* 3 คอลัมน์เท่ากัน */
  grid-template-columns: 240px 1fr;      /* sidebar + content */
  grid-template-columns: repeat(3, 1fr); /* เขียนสั้นกว่า */

  /* กำหนดแถว */
  grid-template-rows: auto 1fr auto;     /* header, content, footer */

  gap: 24px;            /* ระยะห่างทั้ง row และ column */
  row-gap: 16px;        /* ระยะห่างเฉพาะแถว */
  column-gap: 24px;     /* ระยะห่างเฉพาะคอลัมน์ */
}

ตัวอย่าง Grid — Page Layout

/* ✓ Grid เหมาะมากสำหรับ Page Layout */
.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 80px;
  grid-template-areas:
    "sidebar  header"
    "sidebar  main"
    "sidebar  footer";
  min-height: 100vh;
}

.sidebar { grid-area: sidebar; }
.header  { grid-area: header; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

ตัวอย่าง Grid — Responsive Card Gallery

/* auto-fit + minmax = responsive โดยไม่ต้องใช้ media query */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* item ที่อยากให้กว้าง 2 คอลัมน์ */
.card-featured {
  grid-column: span 2;
}

เปรียบเทียบ Use Case

1. Navbar / Header bar

Flexbox — จัดของในแนวนอน ปรับ justify-content ได้ง่าย

2. Card grid / Gallery

Grid — repeat(auto-fit, minmax()) ทำ responsive ได้ในบรรทัดเดียว

3. Button group / Tag list

Flexbox — wrap item ได้ตามธรรมชาติด้วย flex-wrap: wrap

4. Page layout (sidebar + content)

Grid — grid-template-areas ทำให้โค้ดอ่านง่ายและแก้ไขง่าย

5. Centering element

ทั้งคู่ — display: flex/grid + place-items: center

Shortcut ที่ใช้บ่อย

/* จัดกึ่งกลางทั้งแนวนอนและแนวตั้ง */
.center-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-grid {
  display: grid;
  place-items: center;
}

/* Responsive โดยไม่มี media query */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}