บทนำ

CSS Grid และ Flexbox เป็นสองเครื่องมือที่ทรงพลังสำหรับสร้าง layouts

Flexbox

Flexbox เป็นวิธีที่ดีสำหรับจัดเรียง items ในแนวเดียว:

.container {
  display: flex;
  justify-content: space-between;
}

CSS Grid

CSS Grid เป็นวิธีที่ทรงพลังสำหรับสร้าง two-dimensional layouts:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

เปรียบเทียบ

ลักษณะ	Flexbox	CSS Grid
Dimensions	1D	2D
Complexity	Easy	Medium

เมื่อใดที่ควรใช้ Flexbox?

• Navigation bars
• Button groups
• Simple lists

เมื่อใดที่ควรใช้ CSS Grid?

• Page layouts
• Dashboard designs
• Complex layouts

บทสรุป

ทั้ง Flexbox และ CSS Grid เป็นเครื่องมือที่ยอดเยี่ยมสำหรับสร้าง layouts