การดู : 0
12/04/2026 18:15น.
EP 4: Flexbox และ Grid ใน Tailwind: สร้าง Layout ระดับโปรได้ภายใน 10 นาที
#Flexbox Tailwind
#CSS Grid Tailwind
#Layout Tailwind CSS
#CSS Layout Patterns
ถ้าคุณเคยปวดหัวกับการสร้าง Layout แล้วล่ะก็ คุณไม่ได้เป็นคนเดียว! การจัดวางองค์ประกอบในหน้าเว็บดูเหมือนง่าย แต่เวลาทำจริงๆ กลับยากและซับซ้อนกว่าที่คิด
"ทำไม Layout ถึงพังบนมือถือ?" "ทำไมของถึงไม่อยู่กึ่งกลาง?" "ทำไมขนาดไม่เท่ากัน?" - เสียงร้องเรียนที่นักพัฒนาเว็บทุกคนเคยพบเจอ
แต่วันนี้จะเป็นวันสุดท้ายที่คุณจะมีปัญหาเหล่านี้! เพราะเราจะมาเรียนรู้ Flexbox และ CSS Grid ใน Tailwind CSS อย่างเป็นระบบ ตั้งแต่พื้นฐานสุดที่มือใหม่ต้องรู้ ไปจนถึงเทคนิคขั้นสูงที่จะทำให้คุณสร้าง Layout ระดับมืออาชีพได้อย่างง่ายดาย
พร้อมแล้วเหรอ? มาเริ่มต้นการเดินทางสู่การเป็นมาสเตอร์ Layout กันเลย!
พื้นฐานที่ต้องรู้: ความแตกต่างระหว่าง Flexbox และ Grid
ก่อนที่เราจะลงลึกถึงเทคนิคต่างๆ เรามาเข้าใจพื้นฐานสำคัญกันก่อน
Flexbox คือ Layout แบบ 1 มิติ
Flexbox เหมาะสำหรับการจัดเรียงองค์ประกอบในแนว หนึ่งทิศทาง - ไม่ว่าจะเป็นแนวนอนหรือแนวตั้ง
<!-- Flexbox: จัดเรียงแนวนอน -->
<div class="flex space-x-4">
<div class="bg-blue-500 text-white p-4">Item 1</div>
<div class="bg-green-500 text-white p-4">Item 2</div>
<div class="bg-red-500 text-white p-4">Item 3</div>
</div>
<!-- Flexbox: จัดเรียงแนวตั้ง -->
<div class="flex flex-col space-y-4">
<div class="bg-blue-500 text-white p-4">Item 1</div>
<div class="bg-green-500 text-white p-4">Item 2</div>
<div class="bg-red-500 text-white p-4">Item 3</div>
</div>
CSS Grid คือ Layout แบบ 2 มิติ
CSS Grid เหมาะสำหรับการสร้าง Layout ที่ซับซ้อน ที่ต้องการควบคุม ทั้งแนวนอนและแนวตั้ง พร้อมกัน
<!-- Grid: สร้าง Layout 2 มิติ -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-500 text-white p-4">1</div>
<div class="bg-green-500 text-white p-4">2</div>
<div class="bg-red-500 text-white p-4">3</div>
<div class="bg-purple-500 text-white p-4">4</div>
<div class="bg-pink-500 text-white p-4">5</div>
<div class="bg-indigo-500 text-white p-4">6</div>
</div>
เลือกใช้อย่างไรให้ถูก?
| สถานการณ์ | ใช้ Flexbox | ใช้ Grid |
|---|---|---|
| Navigation Menu | ✅ เหมาะมาก | ❌ ซับซ้อนเกินไป |
| Button Groups | ✅ เหมาะมาก | ❌ ซับซ้อนเกินไป |
| Card Layouts | ❌ จำกัด | ✅ เหมาะมาก |
| Full Page Layout | ❌ ยุ่งยาก | ✅ เหมาะมาก |
| Form Controls | ✅ เหมาะมาก | ❌ ซับซ้อนเกินไป |
ส่วนที่ 1: Flexbox - เชี่ยวชาญใน 5 ขั้นตอน
ขั้นตอนที่ 1: เข้าใจ Flex Container และ Flex Items
<!-- สร้าง Flex Container -->
<div class="flex bg-gray-100 p-4">
<!-- Flex Items -->
<div class="bg-blue-500 text-white p-4">Flex Item 1</div>
<div class="bg-green-500 text-white p-4">Flex Item 2</div>
<div class="bg-red-500 text-white p-4">Flex Item 3</div>
</div>
หลักการพื้นฐาน:
- ใส่
flexใน parent element = เปลี่ยนเป็น Flex Container - child elements จะกลายเป็น Flex Items โดยอัตโนมัติ
- Flex Items จะเรียงกันในแนวนอน (default)
ขั้นตอนที่ 2: ควบคุมทิศทางด้วย Flex Direction
<div class="space-y-8">
<!-- แนวนอน (default) -->
<div class="flex space-x-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">1</div>
<div class="bg-green-500 text-white p-4">2</div>
<div class="bg-red-500 text-white p-4">3</div>
</div>
<!-- แนวตั้ง -->
<div class="flex flex-col space-y-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">1</div>
<div class="bg-green-500 text-white p-4">2</div>
<div class="bg-red-500 text-white p-4">3</div>
</div>
<!-- แนวนอนกลับด้าน -->
<div class="flex flex-row-reverse space-x-reverse space-x-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">1</div>
<div class="bg-green-500 text-white p-4">2</div>
<div class="bg-red-500 text-white p-4">3</div>
</div>
</div>
ขั้นตอนที่ 3: จัดตำแหน่งแนวนอนด้วย Justify Content
<div class="space-y-6">
<!-- justify-start: ชิดซ้าย -->
<div class="flex justify-start bg-gray-100 p-4">
<div class="bg-blue-500 text-white px-4 py-2">Start</div>
</div>
<!-- justify-center: กึ่งกลาง -->
<div class="flex justify-center bg-gray-100 p-4">
<div class="bg-green-500 text-white px-4 py-2">Center</div>
</div>
<!-- justify-end: ชิดขวา -->
<div class="flex justify-end bg-gray-100 p-4">
<div class="bg-red-500 text-white px-4 py-2">End</div>
</div>
<!-- justify-between: กระจายห่าง -->
<div class="flex justify-between bg-gray-100 p-4">
<div class="bg-purple-500 text-white px-4 py-2">Left</div>
<div class="bg-purple-500 text-white px-4 py-2">Right</div>
</div>
<!-- justify-around: กระจายรอบ -->
<div class="flex justify-around bg-gray-100 p-4">
<div class="bg-indigo-500 text-white px-4 py-2">1</div>
<div class="bg-indigo-500 text-white px-4 py-2">2</div>
<div class="bg-indigo-500 text-white px-4 py-2">3</div>
</div>
<!-- justify-evenly: กระจายเท่ากัน -->
<div class="flex justify-evenly bg-gray-100 p-4">
<div class="bg-pink-500 text-white px-4 py-2">1</div>
<div class="bg-pink-500 text-white px-4 py-2">2</div>
<div class="bg-pink-500 text-white px-4 py-2">3</div>
</div>
</div>
ขั้นตอนที่ 4: จัดตำแหน่งแนวตั้งด้วย Align Items
<div class="space-y-6">
<!-- items-start: ชิดบน -->
<div class="flex items-start bg-gray-100 p-4 h-32">
<div class="bg-blue-500 text-white px-4 py-2">Start</div>
<div class="bg-blue-600 text-white px-4 py-8">Tall Item</div>
</div>
<!-- items-center: กึ่งกลางแนวตั้ง -->
<div class="flex items-center bg-gray-100 p-4 h-32">
<div class="bg-green-500 text-white px-4 py-2">Center</div>
<div class="bg-green-600 text-white px-4 py-8">Tall Item</div>
</div>
<!-- items-end: ชิดล่าง -->
<div class="flex items-end bg-gray-100 p-4 h-32">
<div class="bg-red-500 text-white px-4 py-2">End</div>
<div class="bg-red-600 text-white px-4 py-8">Tall Item</div>
</div>
<!-- items-stretch: ยืดเต็มความสูง -->
<div class="flex items-stretch bg-gray-100 p-4 h-32">
<div class="bg-purple-500 text-white px-4 py-2">Stretch</div>
<div class="bg-purple-600 text-white px-4 py-2">Me Too</div>
</div>
</div>
ขั้นตอนที่ 5: ควบคุมขนาดด้วย Flex Properties
<div class="space-y-6">
<!-- flex-1: แบ่งพื้นที่เท่าๆ กัน -->
<div class="flex space-x-4 bg-gray-100 p-4">
<div class="flex-1 bg-blue-500 text-white p-4 text-center">Equal 1</div>
<div class="flex-1 bg-green-500 text-white p-4 text-center">Equal 2</div>
<div class="flex-1 bg-red-500 text-white p-4 text-center">Equal 3</div>
</div>
<!-- flex-none: ขนาดคงที่ -->
<div class="flex space-x-4 bg-gray-100 p-4">
<div class="flex-none w-32 bg-purple-500 text-white p-4 text-center">Fixed</div>
<div class="flex-1 bg-pink-500 text-white p-4 text-center">Flexible</div>
<div class="flex-none w-24 bg-indigo-500 text-white p-4 text-center">Fixed</div>
</div>
<!-- การผสมผสาน -->
<div class="flex space-x-4 bg-gray-100 p-4">
<div class="flex-none w-20 bg-gray-500 text-white p-4 text-center text-xs">Menu</div>
<div class="flex-1 bg-blue-500 text-white p-4 text-center">Main Content</div>
<div class="flex-none w-32 bg-gray-600 text-white p-4 text-center text-xs">Sidebar</div>
</div>
</div>
เทคนิคพิเศษ: Perfect Center ด้วย Flexbox
<!-- วิธีง่ายที่สุดในการจัดกึ่งกลาง -->
<div class="flex items-center justify-center min-h-screen bg-blue-50">
<div class="bg-white p-8 rounded-lg shadow-lg max-w-md">
<h2 class="text-2xl font-bold text-center mb-4">Perfect Center!</h2>
<p class="text-gray-600 text-center">
การจัดกึ่งกลางที่ง่ายที่สุดด้วย Flexbox
</p>
<button class="w-full mt-4 bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition-colors">
Click Me
</button>
</div>
</div>
ส่วนที่ 2: CSS Grid - สร้าง Layout ขั้นสูงอย่างมืออาชีพ
เริ่มต้นด้วย Grid พื้นฐาน
<!-- Grid 3 คอลัมน์พื้นฐาน -->
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4 text-center">1</div>
<div class="bg-green-500 text-white p-4 text-center">2</div>
<div class="bg-red-500 text-white p-4 text-center">3</div>
<div class="bg-purple-500 text-white p-4 text-center">4</div>
<div class="bg-pink-500 text-white p-4 text-center">5</div>
<div class="bg-indigo-500 text-white p-4 text-center">6</div>
</div>
ระบบ Grid Columns ใน Tailwind
<div class="space-y-8">
<!-- 1 คอลัมน์ -->
<div class="grid grid-cols-1 gap-4">
<div class="bg-blue-500 text-white p-4 text-center">Single Column</div>
<div class="bg-green-500 text-white p-4 text-center">Layout</div>
</div>
<!-- 2 คอลัมน์ -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-red-500 text-white p-4 text-center">Column 1</div>
<div class="bg-purple-500 text-white p-4 text-center">Column 2</div>
</div>
<!-- 4 คอลัมน์ -->
<div class="grid grid-cols-4 gap-4">
<div class="bg-yellow-500 text-white p-4 text-center">1</div>
<div class="bg-pink-500 text-white p-4 text-center">2</div>
<div class="bg-indigo-500 text-white p-4 text-center">3</div>
<div class="bg-cyan-500 text-white p-4 text-center">4</div>
</div>
<!-- 12 คอลัมน์ (เหมือน Bootstrap) -->
<div class="grid grid-cols-12 gap-2">
<div class="bg-gray-500 text-white p-2 text-center text-xs">1</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">2</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">3</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">4</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">5</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">6</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">7</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">8</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">9</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">10</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">11</div>
<div class="bg-gray-500 text-white p-2 text-center text-xs">12</div>
</div>
</div>
Grid Span - ขยายพื้นที่แบบเซียน
<div class="space-y-8">
<!-- Column Spanning -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 bg-blue-500 text-white p-4 text-center">
ขยาย 2 คอลัมน์
</div>
<div class="bg-green-500 text-white p-4 text-center">1</div>
<div class="bg-red-500 text-white p-4 text-center">2</div>
<div class="bg-purple-500 text-white p-4 text-center">3</div>
<div class="col-span-3 bg-pink-500 text-white p-4 text-center">
ขยาย 3 คอลัมน์
</div>
</div>
<!-- Row และ Column Spanning -->
<div class="grid grid-cols-4 grid-rows-3 gap-4 h-64">
<div class="col-span-2 row-span-2 bg-blue-500 text-white p-4 flex items-center justify-center">
2x2 พื้นที่
</div>
<div class="bg-green-500 text-white p-4 text-center">A</div>
<div class="bg-red-500 text-white p-4 text-center">B</div>
<div class="bg-purple-500 text-white p-4 text-center">C</div>
<div class="row-span-2 bg-pink-500 text-white p-4 flex items-center justify-center">
แนวตั้ง
</div>
<div class="col-span-2 bg-indigo-500 text-white p-4 text-center">
กว้าง 2 คอลัมน์
</div>
<div class="bg-yellow-500 text-white p-4 text-center">D</div>
</div>
</div>
Grid Gap - จัดการระยะห่าง
<div class="space-y-8">
<!-- ไม่มี Gap -->
<div class="grid grid-cols-3">
<div class="bg-blue-500 text-white p-4 border border-white text-center">1</div>
<div class="bg-green-500 text-white p-4 border border-white text-center">2</div>
<div class="bg-red-500 text-white p-4 border border-white text-center">3</div>
</div>
<!-- Gap เท่ากัน -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-purple-500 text-white p-4 text-center">1</div>
<div class="bg-pink-500 text-white p-4 text-center">2</div>
<div class="bg-indigo-500 text-white p-4 text-center">3</div>
</div>
<!-- Gap แยกแนวนอน-ตั้ง -->
<div class="grid grid-cols-3 gap-x-8 gap-y-2">
<div class="bg-yellow-500 text-white p-4 text-center">1</div>
<div class="bg-cyan-500 text-white p-4 text-center">2</div>
<div class="bg-orange-500 text-white p-4 text-center">3</div>
<div class="bg-lime-500 text-white p-4 text-center">4</div>
<div class="bg-emerald-500 text-white p-4 text-center">5</div>
<div class="bg-teal-500 text-white p-4 text-center">6</div>
</div>
</div>
ส่วนที่ 3: Responsive Layout ที่ใช้งานได้จริง
Mobile-First Strategy
<!-- Layout ที่เปลี่ยนตามขนาดหน้าจอ -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
<div class="bg-blue-500 text-white p-6 rounded-lg">
<h3 class="font-bold mb-2">Card 1</h3>
<p class="text-blue-100">
1 คอลัมน์ในมือถือ<br>
2 คอลัมน์ในแท็บเล็ต<br>
3 คอลัมน์ใน laptop<br>
4 คอลัมน์ใน desktop
</p>
</div>
<div class="bg-green-500 text-white p-6 rounded-lg">
<h3 class="font-bold mb-2">Card 2</h3>
<p class="text-green-100">
ระบบ Responsive<br>
ที่ยืดหยุ่น
</p>
</div>
<div class="bg-red-500 text-white p-6 rounded-lg">
<h3 class="font-bold mb-2">Card 3</h3>
<p class="text-red-100">
ใช้งานง่าย<br>
ด้วย Tailwind
</p>
</div>
<div class="bg-purple-500 text-white p-6 rounded-lg">
<h3 class="font-bold mb-2">Card 4</h3>
<p class="text-purple-100">
Professional<br>
Layout
</p>
</div>
</div>
Navigation Layout ที่ Responsive
<!-- Responsive Navigation -->
<header class="bg-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<div class="flex items-center">
<h1 class="text-xl font-bold text-gray-900">MyWebsite</h1>
</div>
<!-- Desktop Navigation -->
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Home</a>
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">About</a>
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Services</a>
<a href="#" class="text-gray-600 hover:text-gray-900 transition-colors">Contact</a>
</nav>
<!-- Mobile Menu Button -->
<button class="md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</header>
ส่วนที่ 4: Layout Patterns ที่ใช้บ่อย
Pattern 1: Holy Grail Layout
<!-- Layout คลาสสิก: Header + Sidebar + Content + Footer -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-blue-600 text-white p-4">
<div class="max-w-7xl mx-auto">
<h1 class="text-xl font-bold">Holy Grail Layout</h1>
</div>
</header>
<!-- Main Content Area -->
<main class="flex-1 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-4 gap-6 p-6">
<!-- Left Sidebar -->
<aside class="lg:col-span-1 bg-gray-100 p-4 rounded-lg">
<h3 class="font-bold mb-3">Navigation</h3>
<ul class="space-y-2">
<li><a href="#" class="text-blue-600 hover:text-blue-800">หน้าแรก</a></li>
<li><a href="#" class="text-blue-600 hover:text-blue-800">เกี่ยวกับเรา</a></li>
<li><a href="#" class="text-blue-600 hover:text-blue-800">บริการ</a></li>
<li><a href="#" class="text-blue-600 hover:text-blue-800">ติดต่อ</a></li>
</ul>
</aside>
<!-- Main Content -->
<section class="lg:col-span-2 bg-white p-6 rounded-lg shadow-sm">
<h2 class="text-2xl font-bold mb-4">เนื้อหาหลัก</h2>
<p class="text-gray-700 mb-4">
นี่คือพื้นที่เนื้อหาหลักที่จะขยายตามความยาวของเนื้อหา
Layout นี้เรียกว่า Holy Grail เพราะเป็น Layout ที่หลายคนพยายามทำมานาน
</p>
<div class="space-y-4">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h3 class="font-semibold text-blue-800">ข้อดี</h3>
<p class="text-blue-700">Layout ที่ยืดหยุ่นและใช้งานได้จริง</p>
</div>
<div class="bg-green-50 border border-green-200 rounded-lg p-4">
<h3 class="font-semibold text-green-800">การใช้งาน</h3>
<p class="text-green-700">เหมาะสำหรับเว็บไซต์ข่าว, บล็อก, เอกสาร</p>
</div>
</div>
</section>
<!-- Right Sidebar -->
<aside class="lg:col-span-1 bg-gray-50 p-4 rounded-lg">
<h3 class="font-bold mb-3">โฆษณา</h3>
<div class="space-y-3">
<div class="bg-yellow-100 border border-yellow-300 rounded p-3 text-center">
<p class="text-sm text-yellow-800">Ad Space 1</p>
</div>
<div class="bg-green-100 border border-green-300 rounded p-3 text-center">
<p class="text-sm text-green-800">Ad Space 2</p>
</div>
<div class="bg-blue-100 border border-blue-300 rounded p-3 text-center">
<p class="text-sm text-blue-800">Ad Space 3</p>
</div>
</div>
</aside>
</main>
<!-- Footer -->
<footer class="bg-gray-800 text-white p-4">
<div class="max-w-7xl mx-auto text-center">
<p>© 2025 Holy Grail Layout. สร้างด้วย Tailwind CSS</p>
</div>
</footer>
</div>
Pattern 2: Card Grid Layout
<!-- Responsive Card Grid -->
<div class="max-w-7xl mx-auto p-6">
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-900 mb-2">สินค้าแนะนำ</h2>
<p class="text-gray-600">เลือกสรรสินค้าคุณภาพเพื่อคุณ</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Product Card 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
<div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
<span class="text-white text-lg font-medium">รูปสินค้า</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
MacBook Pro M3
</h3>
<p class="text-gray-600 text-sm mb-3">Laptop สำหรับมืออาชีพ</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900">฿89,900</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors">
เพิ่มลงตะกร้า
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
<div class="h-48 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center">
<span class="text-white text-lg font-medium">รูปสินค้า</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
iPhone 15 Pro
</h3>
<p class="text-gray-600 text-sm mb-3">สมาร์ทโฟนล่าสุด</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900">฿42,900</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors">
เพิ่มลงตะกร้า
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
<div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center">
<span class="text-white text-lg font-medium">รูปสินค้า</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
iPad Air
</h3>
<p class="text-gray-600 text-sm mb-3">แท็บเล็ตเพื่อความสร้างสรรค์</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900">฿23,900</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors">
เพิ่มลงตะกร้า
</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group">
<div class="h-48 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center">
<span class="text-white text-lg font-medium">รูปสินค้า</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
Apple Watch
</h3>
<p class="text-gray-600 text-sm mb-3">นาฬิกาอัจฉริยะ</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900">฿12,900</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors">
เพิ่มลงตะกร้า
</button>
</div>
</div>
</div>
</div>
</div>
Pattern 3: Dashboard Layout
<!-- Modern Dashboard -->
<div class="min-h-screen bg-gray-100">
<!-- Top Navigation -->
<nav class="bg-white shadow-sm border-b border-gray-200">
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<h1 class="text-xl font-bold text-gray-900">Dashboard</h1>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:text-gray-900">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
</svg>
</button>
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
<span class="text-white text-sm font-medium">JS</span>
</div>
</div>
</div>
</div>
</nav>
<div class="flex">
<!-- Sidebar -->
<aside class="w-64 bg-white shadow-sm min-h-screen">
<nav class="mt-5 px-2">
<a href="#" class="bg-blue-100 text-blue-700 group flex items-center px-2 py-2 text-sm font-medium rounded-md mb-1">
<svg class="text-blue-500 mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2V7z" />
</svg>
Dashboard
</a>
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md mb-1">
<svg class="text-gray-400 mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
Analytics
</a>
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md mb-1">
<svg class="text-gray-400 mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
</svg>
Users
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="flex-1 p-6">
<!-- Stats Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold">$</span>
</div>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">รายได้รวม</dt>
<dd class="text-lg font-medium text-gray-900">฿2,847,500</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<span class="text-green-600 font-medium">+12.5%</span>
<span class="text-gray-500"> จากเดือนที่แล้ว</span>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold">↗</span>
</div>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">การเติบโต</dt>
<dd class="text-lg font-medium text-gray-900">+18.2%</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<span class="text-green-600 font-medium">+8.1%</span>
<span class="text-gray-500"> จากสัปดาห์ที่แล้ว</span>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold">👥</span>
</div>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">ผู้ใช้ใหม่</dt>
<dd class="text-lg font-medium text-gray-900">2,845</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<span class="text-red-600 font-medium">-2.3%</span>
<span class="text-gray-500"> จากเดือนที่แล้ว</span>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5">
<div class="flex items-center">
<div class="flex-shrink-0">
<div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
<span class="text-white font-bold">⚡</span>
</div>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm font-medium text-gray-500 truncate">ประสิทธิภาพ</dt>
<dd class="text-lg font-medium text-gray-900">98.3%</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-5 py-3">
<div class="text-sm">
<span class="text-green-600 font-medium">+0.8%</span>
<span class="text-gray-500"> จากสัปดาห์ที่แล้ว</span>
</div>
</div>
</div>
</div>
<!-- Chart Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white shadow rounded-lg">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">แนวโน้มรายได้</h3>
<div class="h-64 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg flex items-center justify-center">
<div class="text-center">
<div class="text-4xl mb-2">📈</div>
<p class="text-gray-600">กราฟแสดงรายได้</p>
</div>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg">
<div class="p-6">
<h3 class="text-lg font-medium text-gray-900 mb-4">กิจกรรมผู้ใช้</h3>
<div class="h-64 bg-gradient-to-br from-green-50 to-emerald-100 rounded-lg flex items-center justify-center">
<div class="text-center">
<div class="text-4xl mb-2">👥</div>
<p class="text-gray-600">กราฟผู้ใช้งาน</p>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
ส่วนที่ 5: เทคนิคขั้นสูงและ Best Practices
เทคนิค 1: Place Items และ Place Content
<div class="space-y-8 p-6">
<!-- Place Items - จัดตำแหน่ง items แต่ละตัว -->
<div>
<h3 class="text-lg font-semibold mb-4">Place Items (จัดตำแหน่งแต่ละ item)</h3>
<div class="grid grid-cols-3 gap-4 place-items-center h-32 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-2 w-16 h-16 flex items-center justify-center">1</div>
<div class="bg-green-500 text-white p-2 w-20 h-20 flex items-center justify-center">2</div>
<div class="bg-red-500 text-white p-2 w-12 h-12 flex items-center justify-center">3</div>
</div>
</div>
<!-- Place Content - จัดตำแหน่ง grid ทั้งหมด -->
<div>
<h3 class="text-lg font-semibold mb-4">Place Content (จัดตำแหน่ง grid ทั้งหมด)</h3>
<div class="grid grid-cols-2 gap-4 place-content-center h-64 bg-gray-100 p-4">
<div class="bg-purple-500 text-white p-4 text-center">A</div>
<div class="bg-pink-500 text-white p-4 text-center">B</div>
<div class="bg-indigo-500 text-white p-4 text-center">C</div>
<div class="bg-cyan-500 text-white p-4 text-center">D</div>
</div>
</div>
</div>
เทคนิค 2: Aspect Ratio Utilities
<div class="space-y-8 p-6">
<h3 class="text-lg font-semibold mb-4">Aspect Ratio Control</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 16:9 Video -->
<div class="aspect-video bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center">
<span class="text-white font-medium">16:9 Video</span>
</div>
<!-- 1:1 Square -->
<div class="aspect-square bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center">
<span class="text-white font-medium">1:1 Square</span>
</div>
<!-- 4:3 Traditional -->
<div class="aspect-[4/3] bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center">
<span class="text-white font-medium">4:3 Traditional</span>
</div>
</div>
</div>
เทคนิค 3: Order Utilities สำหรับ Flexbox
<div class="space-y-8 p-6">
<h3 class="text-lg font-semibold mb-4">Flexbox Order Control</h3>
<!-- Desktop Order -->
<div class="flex flex-col md:flex-row gap-4 bg-gray-100 p-4 rounded-lg">
<div class="flex-1 bg-blue-500 text-white p-4 order-3 md:order-1">
<h4 class="font-bold">Main Content</h4>
<p class="text-blue-100">ลำดับที่ 1 บน desktop, ลำดับที่ 3 บน mobile</p>
</div>
<div class="w-full md:w-64 bg-green-500 text-white p-4 order-1 md:order-2">
<h4 class="font-bold">Sidebar</h4>
<p class="text-green-100">ลำดับที่ 2 บน desktop, ลำดับที่ 1 บน mobile</p>
</div>
<div class="w-full md:w-48 bg-red-500 text-white p-4 order-2 md:order-3">
<h4 class="font-bold">Ads</h4>
<p class="text-red-100">ลำดับที่ 3 บน desktop, ลำดับที่ 2 บน mobile</p>
</div>
</div>
</div>
เทคนิค 4: Layout Animation ที่เหมาะสม
<div class="space-y-8 p-6">
<h3 class="text-lg font-semibold mb-4">Performance-Optimized Layout Animations</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Transform-based Animation -->
<div class="bg-blue-500 text-white p-6 rounded-lg transform hover:scale-105 transition-transform duration-300 cursor-pointer">
<h4 class="font-bold mb-2">Scale Transform</h4>
<p class="text-blue-100">ใช้ transform สำหรับ performance ที่ดี</p>
</div>
<!-- Translate Animation -->
<div class="bg-green-500 text-white p-6 rounded-lg transform hover:-translate-y-2 transition-transform duration-300 cursor-pointer">
<h4 class="font-bold mb-2">Translate Movement</h4>
<p class="text-green-100">ใช้ translate สำหรับการเคลื่อนไหวที่นุ่มนวล</p>
</div>
<!-- Opacity Animation -->
<div class="bg-purple-500 text-white p-6 rounded-lg hover:opacity-80 transition-opacity duration-300 cursor-pointer">
<h4 class="font-bold mb-2">Opacity Change</h4>
<p class="text-purple-100">เปลี่ยน opacity แทนการซ่อน/แสดง</p>
</div>
</div>
</div>
ข้อผิดพลาดที่ควรหลีกเลี่ยง
❌ ผิด: ใช้ Flexbox สำหรับ Layout ที่ซับซ้อน
<!-- ไม่แนะนำ: ใช้ Flexbox สำหรับ Layout 2 มิติ -->
<div class="flex flex-wrap">
<div class="w-full">
<div class="flex">
<div class="w-1/4">Sidebar</div>
<div class="flex-1">
<div class="h-32">Header</div>
<div class="flex-1">Content</div>
</div>
</div>
</div>
</div>
✅ ถูก: ใช้ Grid สำหรับ Layout ที่ซับซ้อน
<!-- แนะนำ: ใช้ Grid สำหรับ Layout 2 มิติ -->
<div class="grid grid-cols-4 grid-rows-[auto_1fr] h-screen gap-4">
<header class="col-span-4 bg-blue-500 text-white p-4">Header</header>
<aside class="bg-gray-100 p-4">Sidebar</aside>
<main class="col-span-3 bg-white p-4">Content</main>
</div>
❌ ผิด: ลืมทำ Responsive
<!-- ไม่แนะนำ: Layout ที่ไม่ responsive -->
<div class="grid grid-cols-4 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
✅ ถูก: Layout ที่ Responsive
<!-- แนะนำ: Layout ที่ responsive -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
❌ ผิด: การใช้ Animation ที่กิน Performance
<!-- ไม่แนะนำ: เปลี่ยน width/height -->
<div class="w-32 hover:w-64 transition-all duration-300">Performance Heavy</div>
<!-- ไม่แนะนำ: เปลี่ยน margin/padding -->
<div class="ml-4 hover:ml-8 transition-all duration-300">Layout Thrashing</div>
✅ ถูก: การใช้ Animation ที่ Performance ดี
<!-- แนะนำ: ใช้ transform -->
<div class="transform hover:scale-150 transition-transform duration-300">Good Performance</div>
<!-- แนะนำ: ใช้ opacity -->
<div class="opacity-100 hover:opacity-50 transition-opacity duration-300">Smooth Transition</div>
Performance Tips และ Accessibility
1. Performance Optimization
<!-- ใช้ transform สำหรับ Animation ที่นุ่มนวล -->
<div class="transform hover:scale-105 transition-transform duration-300">
Optimized Animation
</div>
<!-- หลีกเลี่ยงการเปลี่ยน layout properties -->
<div class="transform hover:translate-x-4 transition-transform">
✅ ดี: ใช้ transform
</div>
<div class="ml-4 hover:ml-8 transition-all">
❌ ไม่ดี: เปลี่ยน margin
</div>
2. Accessibility Best Practices
<!-- Focus States ที่ชัดเจน -->
<button class="bg-blue-500 text-white px-4 py-2 rounded focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-50">
Accessible Button
</button>
<!-- Skip Links สำหรับ Screen Reader -->
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 bg-blue-600 text-white p-2 rounded">
Skip to main content
</a>
<!-- Semantic HTML Structure -->
<main id="main-content" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<article class="lg:col-span-2">
<h1 class="text-2xl font-bold mb-4">Article Title</h1>
<p>Article content...</p>
</article>
<aside class="bg-gray-100 p-4 rounded-lg">
<h2 class="text-lg font-semibold mb-3">Related Links</h2>
<nav aria-label="Related content">
<ul class="space-y-2">
<li><a href="#" class="text-blue-600 hover:text-blue-800 focus:outline-none focus:underline">Related Article 1</a></li>
<li><a href="#" class="text-blue-600 hover:text-blue-800 focus:outline-none focus:underline">Related Article 2</a></li>
</ul>
</nav>
</aside>
</main>
<!-- สีที่มี contrast เพียงพอ -->
<div class="bg-blue-600 text-white p-4">
✅ ดี: Contrast ratio 4.5:1+
</div>
<div class="bg-blue-300 text-blue-400 p-4">
❌ ไม่ดี: Contrast ไม่เพียงพอ
</div>
3. Browser Compatibility Tips
หมายเหตุสำคัญ: ฟีเจอร์ต่างๆ มีการรองรับที่แตกต่างกัน
<!-- CSS Grid - รองรับใน browser สมัยใหม่ทุกตัว -->
<div class="grid grid-cols-3 gap-4">
<!-- Grid content -->
</div>
<!-- Flexbox - รองรับใน browser สมัยใหม่ทุกตัว -->
<div class="flex items-center justify-center">
<!-- Flex content -->
</div>
<!-- Aspect Ratio - รองรับใน browser สมัยใหม่ -->
<div class="aspect-video bg-gray-200">
<!-- Modern browsers -->
</div>
<!-- Fallback สำหรับ browser เก่า -->
<div class="relative w-full" style="padding-bottom: 56.25%;"> <!-- 16:9 ratio -->
<div class="absolute inset-0 bg-gray-200">
<!-- Legacy browsers -->
</div>
</div>
4. Debugging Layout Issues
<!-- เพิ่ม border ชั่วคราวเพื่อ debug -->
<div class="grid grid-cols-3 gap-4 border-2 border-red-500">
<div class="border border-blue-500">Item 1</div>
<div class="border border-green-500">Item 2</div>
<div class="border border-purple-500">Item 3</div>
</div>
<!-- ใช้ background สี debug -->
<div class="flex bg-yellow-100">
<div class="flex-1 bg-red-100 p-4">Flexible</div>
<div class="flex-none w-32 bg-blue-100 p-4">Fixed</div>
</div>
CSS สำหรับ debug (ใส่ใน development เท่านั้น)
/* Debug borders */
.debug * {
border: 1px solid red !important;
}
/* Debug grid */
.debug-grid {
background-image:
linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
สรุป
ใน EP 4 นี้ เราได้เรียนรู้การสร้าง Layout ด้วย Flexbox และ Grid อย่างเป็นระบบ:
สิ่งสำคัญที่ได้เรียนรู้:
- Flexbox เหมาะสำหรับ Layout 1 มิติ และการจัดเรียงองค์ประกอบ
- Grid เหมาะสำหรับ Layout 2 มิติ และการสร้าง Layout ที่ซับซ้อน
- Responsive Design ที่เริ่มจาก Mobile-First เป็นแนวปฏิบัติที่ดี
- Layout Patterns ที่ใช้งานได้จริง ในโลกจริง
- Performance Tips และ Accessibility ที่ควรคำนึงถึง
- Browser Compatibility และการ debug layout issues
เทคนิคสำคัญที่ต้องจำ:
- ใช้ Flexbox สำหรับ: Navigation, Button groups, Form controls
- ใช้ Grid สำหรับ: Page layouts, Card grids, Dashboard layouts
- Mobile-First Strategy: เริ่มจาก grid-cols-1 แล้วขยายไป desktop
- Performance-first Animation: ใช้ transform และ opacity แทน layout properties
- Accessibility: ใช้ semantic HTML, focus states, และ proper contrast
ข้อผิดพลาดที่ควรหลีกเลี่ยง:
- ❌ ใช้ Flexbox สำหรับ Layout 2 มิติที่ซับซ้อน
- ❌ ลืมทำ Responsive Design
- ❌ ใช้ Animation ที่เปลี่ยน layout properties
- ❌ ไม่คำนึงถึง Accessibility
- ❌ ไม่ตรวจสอบ Browser Compatibility
การเชี่ยวชาญ Flexbox และ Grid จะทำให้คุณสร้าง Layout ได้อย่างมืออาชีพ ไม่ว่าจะเป็น Dashboard, E-commerce, หรือ Blog Layout ซับซ้อนแค่ไหนก็สามารถจัดการได้อย่างง่ายดาย
EP 5 เรื่อง "Responsive Design ด้วย Tailwind: จอเล็ก-จอใหญ่ สวยครบทุกขนาด" เราจะมาเรียนรู้เทคนิคการสร้าง Responsive Design ขั้นสูง การใช้ Breakpoints อย่างเซียน Mobile-First Strategy และการทำ Progressive Enhancement ที่ทำให้เว็บไซต์ใช้งานได้ดีในทุกอุปกรณ์
พร้อมที่จะเป็นมาสเตอร์ Responsive Design แล้วใช่ไหม? ติดตาม Superdev School เพื่อไม่พลาดเทคนิคการสร้าง Layout ที่ตอบสนองได้ในทุกสถานการณ์!
การเข้าใจ Layout เป็นพื้นฐานที่สำคัญของการออกแบบเว็บไซต์ ตอนนี้คุณมีเครื่องมือที่จำเป็นแล้ว มาสร้าง Layout ที่สวยงามและใช้งานง่ายด้วย Tailwind CSS กันเถอะ! 🎯
อ่านบทความ Series อื่นๆ
🔵 Facebook: Superdev School (Superdev)
📸 Instagram: superdevschool
🎬 TikTok: superdevschool
🌐 Website: www.superdev.school