[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-ep4-flexbox-grid-tailwind-css-layout-patterns-thai-all--*":3,"academy-blog-translations-nblcw7hw1voheyl":75},{"data":4,"page":74,"perPage":74,"totalItems":74,"totalPages":74},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":68,"keywords":69,"locale":44,"published_at":70,"scheduled_at":13,"school_blog":66,"short_description":71,"slug":72,"status":64,"title":6,"updated":73,"updated_by":13,"views":67},"EP 4: Flexbox และ Grid ใน Tailwind: สร้าง Layout ระดับโปรได้ภายใน 10 นาที","sclblg987654321","school_blog_translations","\u003Cp>ถ้าคุณเคยปวดหัวกับการสร้าง Layout แล้วล่ะก็ คุณไม่ได้เป็นคนเดียว! การจัดวางองค์ประกอบในหน้าเว็บดูเหมือนง่าย แต่เวลาทำจริงๆ กลับยากและซับซ้อนกว่าที่คิด\u003C\u002Fp>\u003Cp>\"ทำไม Layout ถึงพังบนมือถือ?\" \"ทำไมของถึงไม่อยู่กึ่งกลาง?\" \"ทำไมขนาดไม่เท่ากัน?\" - เสียงร้องเรียนที่นักพัฒนาเว็บทุกคนเคยพบเจอ\u003C\u002Fp>\u003Cp>แต่วันนี้จะเป็นวันสุดท้ายที่คุณจะมีปัญหาเหล่านี้! เพราะเราจะมาเรียนรู้ Flexbox และ CSS Grid ใน Tailwind CSS อย่างเป็นระบบ ตั้งแต่พื้นฐานสุดที่มือใหม่ต้องรู้ ไปจนถึงเทคนิคขั้นสูงที่จะทำให้คุณสร้าง Layout ระดับมืออาชีพได้อย่างง่ายดาย\u003C\u002Fp>\u003Cp>พร้อมแล้วเหรอ? มาเริ่มต้นการเดินทางสู่การเป็นมาสเตอร์ Layout กันเลย!\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>พื้นฐานที่ต้องรู้: ความแตกต่างระหว่าง Flexbox และ Grid\u003C\u002Fh2>\u003Cp>ก่อนที่เราจะลงลึกถึงเทคนิคต่างๆ เรามาเข้าใจพื้นฐานสำคัญกันก่อน\u003C\u002Fp>\u003Ch3>Flexbox คือ Layout แบบ 1 มิติ\u003C\u002Fh3>\u003Cp>Flexbox เหมาะสำหรับการจัดเรียงองค์ประกอบในแนว \u003Cstrong>หนึ่งทิศทาง\u003C\u002Fstrong> - ไม่ว่าจะเป็นแนวนอนหรือแนวตั้ง\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Flexbox: จัดเรียงแนวนอน -->\n<div class=\"flex space-x-4\">\n <div class=\"bg-blue-500 text-white p-4\">Item 1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">Item 2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">Item 3<\u002Fdiv>\n<\u002Fdiv>\n\n<!-- Flexbox: จัดเรียงแนวตั้ง -->\n<div class=\"flex flex-col space-y-4\">\n <div class=\"bg-blue-500 text-white p-4\">Item 1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">Item 2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">Item 3<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>CSS Grid คือ Layout แบบ 2 มิติ\u003C\u002Fh3>\u003Cp>CSS Grid เหมาะสำหรับการสร้าง Layout ที่ซับซ้อน ที่ต้องการควบคุม \u003Cstrong>ทั้งแนวนอนและแนวตั้ง\u003C\u002Fstrong> พร้อมกัน\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Grid: สร้าง Layout 2 มิติ -->\n<div class=\"grid grid-cols-3 gap-4\">\n <div class=\"bg-blue-500 text-white p-4\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">3<\u002Fdiv>\n <div class=\"bg-purple-500 text-white p-4\">4<\u002Fdiv>\n <div class=\"bg-pink-500 text-white p-4\">5<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white p-4\">6<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เลือกใช้อย่างไรให้ถูก?\u003C\u002Fh3>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>สถานการณ์\u003C\u002Fth>\u003Cth>ใช้ Flexbox\u003C\u002Fth>\u003Cth>ใช้ Grid\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Navigation Menu\u003C\u002Ftd>\u003Ctd>✅ เหมาะมาก\u003C\u002Ftd>\u003Ctd>❌ ซับซ้อนเกินไป\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Button Groups\u003C\u002Ftd>\u003Ctd>✅ เหมาะมาก\u003C\u002Ftd>\u003Ctd>❌ ซับซ้อนเกินไป\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Card Layouts\u003C\u002Ftd>\u003Ctd>❌ จำกัด\u003C\u002Ftd>\u003Ctd>✅ เหมาะมาก\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Full Page Layout\u003C\u002Ftd>\u003Ctd>❌ ยุ่งยาก\u003C\u002Ftd>\u003Ctd>✅ เหมาะมาก\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Form Controls\u003C\u002Ftd>\u003Ctd>✅ เหมาะมาก\u003C\u002Ftd>\u003Ctd>❌ ซับซ้อนเกินไป\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Ch2>ส่วนที่ 1: Flexbox - เชี่ยวชาญใน 5 ขั้นตอน\u003C\u002Fh2>\u003Ch3>ขั้นตอนที่ 1: เข้าใจ Flex Container และ Flex Items\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- สร้าง Flex Container -->\n<div class=\"flex bg-gray-100 p-4\">\n <!-- Flex Items -->\n <div class=\"bg-blue-500 text-white p-4\">Flex Item 1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">Flex Item 2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">Flex Item 3<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>หลักการพื้นฐาน:\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>ใส่ \u003Ccode>flex\u003C\u002Fcode> ใน parent element = เปลี่ยนเป็น Flex Container\u003C\u002Fli>\u003Cli>child elements จะกลายเป็น Flex Items โดยอัตโนมัติ\u003C\u002Fli>\u003Cli>Flex Items จะเรียงกันในแนวนอน (default)\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>ขั้นตอนที่ 2: ควบคุมทิศทางด้วย Flex Direction\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8\">\n <!-- แนวนอน (default) -->\n <div class=\"flex space-x-4 bg-gray-100 p-4\">\n <div class=\"bg-blue-500 text-white p-4\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">3<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- แนวตั้ง -->\n <div class=\"flex flex-col space-y-4 bg-gray-100 p-4\">\n <div class=\"bg-blue-500 text-white p-4\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">3<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- แนวนอนกลับด้าน -->\n <div class=\"flex flex-row-reverse space-x-reverse space-x-4 bg-gray-100 p-4\">\n <div class=\"bg-blue-500 text-white p-4\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4\">3<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ขั้นตอนที่ 3: จัดตำแหน่งแนวนอนด้วย Justify Content\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-6\">\n <!-- justify-start: ชิดซ้าย -->\n <div class=\"flex justify-start bg-gray-100 p-4\">\n <div class=\"bg-blue-500 text-white px-4 py-2\">Start<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- justify-center: กึ่งกลาง -->\n <div class=\"flex justify-center bg-gray-100 p-4\">\n <div class=\"bg-green-500 text-white px-4 py-2\">Center<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- justify-end: ชิดขวา -->\n <div class=\"flex justify-end bg-gray-100 p-4\">\n <div class=\"bg-red-500 text-white px-4 py-2\">End<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- justify-between: กระจายห่าง -->\n <div class=\"flex justify-between bg-gray-100 p-4\">\n <div class=\"bg-purple-500 text-white px-4 py-2\">Left<\u002Fdiv>\n <div class=\"bg-purple-500 text-white px-4 py-2\">Right<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- justify-around: กระจายรอบ -->\n <div class=\"flex justify-around bg-gray-100 p-4\">\n <div class=\"bg-indigo-500 text-white px-4 py-2\">1<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white px-4 py-2\">2<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white px-4 py-2\">3<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- justify-evenly: กระจายเท่ากัน -->\n <div class=\"flex justify-evenly bg-gray-100 p-4\">\n <div class=\"bg-pink-500 text-white px-4 py-2\">1<\u002Fdiv>\n <div class=\"bg-pink-500 text-white px-4 py-2\">2<\u002Fdiv>\n <div class=\"bg-pink-500 text-white px-4 py-2\">3<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ขั้นตอนที่ 4: จัดตำแหน่งแนวตั้งด้วย Align Items\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-6\">\n <!-- items-start: ชิดบน -->\n <div class=\"flex items-start bg-gray-100 p-4 h-32\">\n <div class=\"bg-blue-500 text-white px-4 py-2\">Start<\u002Fdiv>\n <div class=\"bg-blue-600 text-white px-4 py-8\">Tall Item<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- items-center: กึ่งกลางแนวตั้ง -->\n <div class=\"flex items-center bg-gray-100 p-4 h-32\">\n <div class=\"bg-green-500 text-white px-4 py-2\">Center<\u002Fdiv>\n <div class=\"bg-green-600 text-white px-4 py-8\">Tall Item<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- items-end: ชิดล่าง -->\n <div class=\"flex items-end bg-gray-100 p-4 h-32\">\n <div class=\"bg-red-500 text-white px-4 py-2\">End<\u002Fdiv>\n <div class=\"bg-red-600 text-white px-4 py-8\">Tall Item<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- items-stretch: ยืดเต็มความสูง -->\n <div class=\"flex items-stretch bg-gray-100 p-4 h-32\">\n <div class=\"bg-purple-500 text-white px-4 py-2\">Stretch<\u002Fdiv>\n <div class=\"bg-purple-600 text-white px-4 py-2\">Me Too<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ขั้นตอนที่ 5: ควบคุมขนาดด้วย Flex Properties\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-6\">\n <!-- flex-1: แบ่งพื้นที่เท่าๆ กัน -->\n <div class=\"flex space-x-4 bg-gray-100 p-4\">\n <div class=\"flex-1 bg-blue-500 text-white p-4 text-center\">Equal 1<\u002Fdiv>\n <div class=\"flex-1 bg-green-500 text-white p-4 text-center\">Equal 2<\u002Fdiv>\n <div class=\"flex-1 bg-red-500 text-white p-4 text-center\">Equal 3<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- flex-none: ขนาดคงที่ -->\n <div class=\"flex space-x-4 bg-gray-100 p-4\">\n <div class=\"flex-none w-32 bg-purple-500 text-white p-4 text-center\">Fixed<\u002Fdiv>\n <div class=\"flex-1 bg-pink-500 text-white p-4 text-center\">Flexible<\u002Fdiv>\n <div class=\"flex-none w-24 bg-indigo-500 text-white p-4 text-center\">Fixed<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- การผสมผสาน -->\n <div class=\"flex space-x-4 bg-gray-100 p-4\">\n <div class=\"flex-none w-20 bg-gray-500 text-white p-4 text-center text-xs\">Menu<\u002Fdiv>\n <div class=\"flex-1 bg-blue-500 text-white p-4 text-center\">Main Content<\u002Fdiv>\n <div class=\"flex-none w-32 bg-gray-600 text-white p-4 text-center text-xs\">Sidebar<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิคพิเศษ: Perfect Center ด้วย Flexbox\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- วิธีง่ายที่สุดในการจัดกึ่งกลาง -->\n<div class=\"flex items-center justify-center min-h-screen bg-blue-50\">\n <div class=\"bg-white p-8 rounded-lg shadow-lg max-w-md\">\n <h2 class=\"text-2xl font-bold text-center mb-4\">Perfect Center!<\u002Fh2>\n <p class=\"text-gray-600 text-center\">\n การจัดกึ่งกลางที่ง่ายที่สุดด้วย Flexbox\n <\u002Fp>\n <button class=\"w-full mt-4 bg-blue-500 text-white py-2 rounded hover:bg-blue-600 transition-colors\">\n Click Me\n <\u002Fbutton>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ส่วนที่ 2: CSS Grid - สร้าง Layout ขั้นสูงอย่างมืออาชีพ\u003C\u002Fh2>\u003Ch3>เริ่มต้นด้วย Grid พื้นฐาน\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Grid 3 คอลัมน์พื้นฐาน -->\n<div class=\"grid grid-cols-3 gap-4 bg-gray-100 p-4\">\n <div class=\"bg-blue-500 text-white p-4 text-center\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4 text-center\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4 text-center\">3<\u002Fdiv>\n <div class=\"bg-purple-500 text-white p-4 text-center\">4<\u002Fdiv>\n <div class=\"bg-pink-500 text-white p-4 text-center\">5<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white p-4 text-center\">6<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>ระบบ Grid Columns ใน Tailwind\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8\">\n <!-- 1 คอลัมน์ -->\n <div class=\"grid grid-cols-1 gap-4\">\n <div class=\"bg-blue-500 text-white p-4 text-center\">Single Column<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4 text-center\">Layout<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- 2 คอลัมน์ -->\n <div class=\"grid grid-cols-2 gap-4\">\n <div class=\"bg-red-500 text-white p-4 text-center\">Column 1<\u002Fdiv>\n <div class=\"bg-purple-500 text-white p-4 text-center\">Column 2<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- 4 คอลัมน์ -->\n <div class=\"grid grid-cols-4 gap-4\">\n <div class=\"bg-yellow-500 text-white p-4 text-center\">1<\u002Fdiv>\n <div class=\"bg-pink-500 text-white p-4 text-center\">2<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white p-4 text-center\">3<\u002Fdiv>\n <div class=\"bg-cyan-500 text-white p-4 text-center\">4<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- 12 คอลัมน์ (เหมือน Bootstrap) -->\n <div class=\"grid grid-cols-12 gap-2\">\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">1<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">2<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">3<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">4<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">5<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">6<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">7<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">8<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">9<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">10<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">11<\u002Fdiv>\n <div class=\"bg-gray-500 text-white p-2 text-center text-xs\">12<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Grid Span - ขยายพื้นที่แบบเซียน\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8\">\n <!-- Column Spanning -->\n <div class=\"grid grid-cols-4 gap-4\">\n <div class=\"col-span-2 bg-blue-500 text-white p-4 text-center\">\n ขยาย 2 คอลัมน์\n <\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4 text-center\">1<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4 text-center\">2<\u002Fdiv>\n \n <div class=\"bg-purple-500 text-white p-4 text-center\">3<\u002Fdiv>\n <div class=\"col-span-3 bg-pink-500 text-white p-4 text-center\">\n ขยาย 3 คอลัมน์\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Row และ Column Spanning -->\n <div class=\"grid grid-cols-4 grid-rows-3 gap-4 h-64\">\n <div class=\"col-span-2 row-span-2 bg-blue-500 text-white p-4 flex items-center justify-center\">\n 2x2 พื้นที่\n <\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4 text-center\">A<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4 text-center\">B<\u002Fdiv>\n \n <div class=\"bg-purple-500 text-white p-4 text-center\">C<\u002Fdiv>\n <div class=\"row-span-2 bg-pink-500 text-white p-4 flex items-center justify-center\">\n แนวตั้ง\n <\u002Fdiv>\n \n <div class=\"col-span-2 bg-indigo-500 text-white p-4 text-center\">\n กว้าง 2 คอลัมน์\n <\u002Fdiv>\n <div class=\"bg-yellow-500 text-white p-4 text-center\">D<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Grid Gap - จัดการระยะห่าง\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8\">\n <!-- ไม่มี Gap -->\n <div class=\"grid grid-cols-3\">\n <div class=\"bg-blue-500 text-white p-4 border border-white text-center\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-4 border border-white text-center\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-4 border border-white text-center\">3<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Gap เท่ากัน -->\n <div class=\"grid grid-cols-3 gap-4\">\n <div class=\"bg-purple-500 text-white p-4 text-center\">1<\u002Fdiv>\n <div class=\"bg-pink-500 text-white p-4 text-center\">2<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white p-4 text-center\">3<\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Gap แยกแนวนอน-ตั้ง -->\n <div class=\"grid grid-cols-3 gap-x-8 gap-y-2\">\n <div class=\"bg-yellow-500 text-white p-4 text-center\">1<\u002Fdiv>\n <div class=\"bg-cyan-500 text-white p-4 text-center\">2<\u002Fdiv>\n <div class=\"bg-orange-500 text-white p-4 text-center\">3<\u002Fdiv>\n <div class=\"bg-lime-500 text-white p-4 text-center\">4<\u002Fdiv>\n <div class=\"bg-emerald-500 text-white p-4 text-center\">5<\u002Fdiv>\n <div class=\"bg-teal-500 text-white p-4 text-center\">6<\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ส่วนที่ 3: Responsive Layout ที่ใช้งานได้จริง\u003C\u002Fh2>\u003Ch3>Mobile-First Strategy\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Layout ที่เปลี่ยนตามขนาดหน้าจอ -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6\">\n <div class=\"bg-blue-500 text-white p-6 rounded-lg\">\n <h3 class=\"font-bold mb-2\">Card 1<\u002Fh3>\n <p class=\"text-blue-100\">\n 1 คอลัมน์ในมือถือ<br>\n 2 คอลัมน์ในแท็บเล็ต<br>\n 3 คอลัมน์ใน laptop<br>\n 4 คอลัมน์ใน desktop\n <\u002Fp>\n <\u002Fdiv>\n \n <div class=\"bg-green-500 text-white p-6 rounded-lg\">\n <h3 class=\"font-bold mb-2\">Card 2<\u002Fh3>\n <p class=\"text-green-100\">\n ระบบ Responsive<br>\n ที่ยืดหยุ่น\n <\u002Fp>\n <\u002Fdiv>\n \n <div class=\"bg-red-500 text-white p-6 rounded-lg\">\n <h3 class=\"font-bold mb-2\">Card 3<\u002Fh3>\n <p class=\"text-red-100\">\n ใช้งานง่าย<br>\n ด้วย Tailwind\n <\u002Fp>\n <\u002Fdiv>\n \n <div class=\"bg-purple-500 text-white p-6 rounded-lg\">\n <h3 class=\"font-bold mb-2\">Card 4<\u002Fh3>\n <p class=\"text-purple-100\">\n Professional<br>\n Layout\n <\u002Fp>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Navigation Layout ที่ Responsive\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Responsive Navigation -->\n<header class=\"bg-white shadow-lg\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-16\">\n <!-- Logo -->\n <div class=\"flex items-center\">\n <h1 class=\"text-xl font-bold text-gray-900\">MyWebsite<\u002Fh1>\n <\u002Fdiv>\n \n <!-- Desktop Navigation -->\n <nav class=\"hidden md:flex space-x-8\">\n <a href=\"#\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">Home<\u002Fa>\n <a href=\"#\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">About<\u002Fa>\n <a href=\"#\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">Services<\u002Fa>\n <a href=\"#\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">Contact<\u002Fa>\n <\u002Fnav>\n \n <!-- Mobile Menu Button -->\n <button class=\"md:hidden p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100\">\n <svg class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\" \u002F>\n <\u002Fsvg>\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fheader>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ส่วนที่ 4: Layout Patterns ที่ใช้บ่อย\u003C\u002Fh2>\u003Ch3>Pattern 1: Holy Grail Layout\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Layout คลาสสิก: Header + Sidebar + Content + Footer -->\n<div class=\"min-h-screen flex flex-col\">\n <!-- Header -->\n <header class=\"bg-blue-600 text-white p-4\">\n <div class=\"max-w-7xl mx-auto\">\n <h1 class=\"text-xl font-bold\">Holy Grail Layout<\u002Fh1>\n <\u002Fdiv>\n <\u002Fheader>\n \n <!-- Main Content Area -->\n <main class=\"flex-1 max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-4 gap-6 p-6\">\n <!-- Left Sidebar -->\n <aside class=\"lg:col-span-1 bg-gray-100 p-4 rounded-lg\">\n <h3 class=\"font-bold mb-3\">Navigation<\u002Fh3>\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"text-blue-600 hover:text-blue-800\">หน้าแรก<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-blue-600 hover:text-blue-800\">เกี่ยวกับเรา<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-blue-600 hover:text-blue-800\">บริการ<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-blue-600 hover:text-blue-800\">ติดต่อ<\u002Fa><\u002Fli>\n <\u002Ful>\n <\u002Faside>\n \n <!-- Main Content -->\n <section class=\"lg:col-span-2 bg-white p-6 rounded-lg shadow-sm\">\n <h2 class=\"text-2xl font-bold mb-4\">เนื้อหาหลัก<\u002Fh2>\n <p class=\"text-gray-700 mb-4\">\n นี่คือพื้นที่เนื้อหาหลักที่จะขยายตามความยาวของเนื้อหา \n Layout นี้เรียกว่า Holy Grail เพราะเป็น Layout ที่หลายคนพยายามทำมานาน\n <\u002Fp>\n \n <div class=\"space-y-4\">\n <div class=\"bg-blue-50 border border-blue-200 rounded-lg p-4\">\n <h3 class=\"font-semibold text-blue-800\">ข้อดี<\u002Fh3>\n <p class=\"text-blue-700\">Layout ที่ยืดหยุ่นและใช้งานได้จริง<\u002Fp>\n <\u002Fdiv>\n \n <div class=\"bg-green-50 border border-green-200 rounded-lg p-4\">\n <h3 class=\"font-semibold text-green-800\">การใช้งาน<\u002Fh3>\n <p class=\"text-green-700\">เหมาะสำหรับเว็บไซต์ข่าว, บล็อก, เอกสาร<\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fsection>\n \n <!-- Right Sidebar -->\n <aside class=\"lg:col-span-1 bg-gray-50 p-4 rounded-lg\">\n <h3 class=\"font-bold mb-3\">โฆษณา<\u002Fh3>\n <div class=\"space-y-3\">\n <div class=\"bg-yellow-100 border border-yellow-300 rounded p-3 text-center\">\n <p class=\"text-sm text-yellow-800\">Ad Space 1<\u002Fp>\n <\u002Fdiv>\n <div class=\"bg-green-100 border border-green-300 rounded p-3 text-center\">\n <p class=\"text-sm text-green-800\">Ad Space 2<\u002Fp>\n <\u002Fdiv>\n <div class=\"bg-blue-100 border border-blue-300 rounded p-3 text-center\">\n <p class=\"text-sm text-blue-800\">Ad Space 3<\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Faside>\n <\u002Fmain>\n \n <!-- Footer -->\n <footer class=\"bg-gray-800 text-white p-4\">\n <div class=\"max-w-7xl mx-auto text-center\">\n <p>&copy; 2025 Holy Grail Layout. สร้างด้วย Tailwind CSS<\u002Fp>\n <\u002Fdiv>\n <\u002Ffooter>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Pattern 2: Card Grid Layout\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Responsive Card Grid -->\n<div class=\"max-w-7xl mx-auto p-6\">\n <div class=\"mb-8\">\n <h2 class=\"text-3xl font-bold text-gray-900 mb-2\">สินค้าแนะนำ<\u002Fh2>\n <p class=\"text-gray-600\">เลือกสรรสินค้าคุณภาพเพื่อคุณ<\u002Fp>\n <\u002Fdiv>\n \n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <!-- Product Card 1 -->\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group\">\n <div class=\"h-48 bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center\">\n <span class=\"text-white text-lg font-medium\">รูปสินค้า<\u002Fspan>\n <\u002Fdiv>\n <div class=\"p-4\">\n <h3 class=\"font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors\">\n MacBook Pro M3\n <\u002Fh3>\n <p class=\"text-gray-600 text-sm mb-3\">Laptop สำหรับมืออาชีพ<\u002Fp>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-gray-900\">฿89,900<\u002Fspan>\n <button class=\"bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors\">\n เพิ่มลงตะกร้า\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Product Card 2 -->\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group\">\n <div class=\"h-48 bg-gradient-to-br from-green-400 to-green-600 flex items-center justify-center\">\n <span class=\"text-white text-lg font-medium\">รูปสินค้า<\u002Fspan>\n <\u002Fdiv>\n <div class=\"p-4\">\n <h3 class=\"font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors\">\n iPhone 15 Pro\n <\u002Fh3>\n <p class=\"text-gray-600 text-sm mb-3\">สมาร์ทโฟนล่าสุด<\u002Fp>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-gray-900\">฿42,900<\u002Fspan>\n <button class=\"bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors\">\n เพิ่มลงตะกร้า\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Product Card 3 -->\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group\">\n <div class=\"h-48 bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center\">\n <span class=\"text-white text-lg font-medium\">รูปสินค้า<\u002Fspan>\n <\u002Fdiv>\n <div class=\"p-4\">\n <h3 class=\"font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors\">\n iPad Air\n <\u002Fh3>\n <p class=\"text-gray-600 text-sm mb-3\">แท็บเล็ตเพื่อความสร้างสรรค์<\u002Fp>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-gray-900\">฿23,900<\u002Fspan>\n <button class=\"bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors\">\n เพิ่มลงตะกร้า\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Product Card 4 -->\n <div class=\"bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow group\">\n <div class=\"h-48 bg-gradient-to-br from-red-400 to-red-600 flex items-center justify-center\">\n <span class=\"text-white text-lg font-medium\">รูปสินค้า<\u002Fspan>\n <\u002Fdiv>\n <div class=\"p-4\">\n <h3 class=\"font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors\">\n Apple Watch\n <\u002Fh3>\n <p class=\"text-gray-600 text-sm mb-3\">นาฬิกาอัจฉริยะ<\u002Fp>\n <div class=\"flex items-center justify-between\">\n <span class=\"text-xl font-bold text-gray-900\">฿12,900<\u002Fspan>\n <button class=\"bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition-colors\">\n เพิ่มลงตะกร้า\n <\u002Fbutton>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>Pattern 3: Dashboard Layout\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Modern Dashboard -->\n<div class=\"min-h-screen bg-gray-100\">\n <!-- Top Navigation -->\n <nav class=\"bg-white shadow-sm border-b border-gray-200\">\n <div class=\"max-w-full mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between h-16\">\n <div class=\"flex items-center\">\n <h1 class=\"text-xl font-bold text-gray-900\">Dashboard<\u002Fh1>\n <\u002Fdiv>\n <div class=\"flex items-center space-x-4\">\n <button class=\"p-2 rounded-full bg-gray-100 text-gray-600 hover:text-gray-900\">\n <svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M10 12a2 2 0 100-4 2 2 0 000 4z\"\u002F>\n <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\"\u002F>\n <\u002Fsvg>\n <\u002Fbutton>\n <div class=\"w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center\">\n <span class=\"text-white text-sm font-medium\">JS<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fnav>\n \n <div class=\"flex\">\n <!-- Sidebar -->\n <aside class=\"w-64 bg-white shadow-sm min-h-screen\">\n <nav class=\"mt-5 px-2\">\n <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\">\n <svg class=\"text-blue-500 mr-3 h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <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\" \u002F>\n <\u002Fsvg>\n Dashboard\n <\u002Fa>\n <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\">\n <svg class=\"text-gray-400 mr-3 h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <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\" \u002F>\n <\u002Fsvg>\n Analytics\n <\u002Fa>\n <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\">\n <svg class=\"text-gray-400 mr-3 h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <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\" \u002F>\n <\u002Fsvg>\n Users\n <\u002Fa>\n <\u002Fnav>\n <\u002Faside>\n \n <!-- Main Content -->\n <main class=\"flex-1 p-6\">\n <!-- Stats Grid -->\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8\">\n <div class=\"bg-white overflow-hidden shadow rounded-lg\">\n <div class=\"p-5\">\n <div class=\"flex items-center\">\n <div class=\"flex-shrink-0\">\n <div class=\"w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center\">\n <span class=\"text-white font-bold\">$<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"ml-5 w-0 flex-1\">\n <dl>\n <dt class=\"text-sm font-medium text-gray-500 truncate\">รายได้รวม<\u002Fdt>\n <dd class=\"text-lg font-medium text-gray-900\">฿2,847,500<\u002Fdd>\n <\u002Fdl>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"bg-gray-50 px-5 py-3\">\n <div class=\"text-sm\">\n <span class=\"text-green-600 font-medium\">+12.5%<\u002Fspan>\n <span class=\"text-gray-500\"> จากเดือนที่แล้ว<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"bg-white overflow-hidden shadow rounded-lg\">\n <div class=\"p-5\">\n <div class=\"flex items-center\">\n <div class=\"flex-shrink-0\">\n <div class=\"w-8 h-8 bg-green-500 rounded-full flex items-center justify-center\">\n <span class=\"text-white font-bold\">↗<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"ml-5 w-0 flex-1\">\n <dl>\n <dt class=\"text-sm font-medium text-gray-500 truncate\">การเติบโต<\u002Fdt>\n <dd class=\"text-lg font-medium text-gray-900\">+18.2%<\u002Fdd>\n <\u002Fdl>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"bg-gray-50 px-5 py-3\">\n <div class=\"text-sm\">\n <span class=\"text-green-600 font-medium\">+8.1%<\u002Fspan>\n <span class=\"text-gray-500\"> จากสัปดาห์ที่แล้ว<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"bg-white overflow-hidden shadow rounded-lg\">\n <div class=\"p-5\">\n <div class=\"flex items-center\">\n <div class=\"flex-shrink-0\">\n <div class=\"w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center\">\n <span class=\"text-white font-bold\">👥<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"ml-5 w-0 flex-1\">\n <dl>\n <dt class=\"text-sm font-medium text-gray-500 truncate\">ผู้ใช้ใหม่<\u002Fdt>\n <dd class=\"text-lg font-medium text-gray-900\">2,845<\u002Fdd>\n <\u002Fdl>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"bg-gray-50 px-5 py-3\">\n <div class=\"text-sm\">\n <span class=\"text-red-600 font-medium\">-2.3%<\u002Fspan>\n <span class=\"text-gray-500\"> จากเดือนที่แล้ว<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"bg-white overflow-hidden shadow rounded-lg\">\n <div class=\"p-5\">\n <div class=\"flex items-center\">\n <div class=\"flex-shrink-0\">\n <div class=\"w-8 h-8 bg-red-500 rounded-full flex items-center justify-center\">\n <span class=\"text-white font-bold\">⚡<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"ml-5 w-0 flex-1\">\n <dl>\n <dt class=\"text-sm font-medium text-gray-500 truncate\">ประสิทธิภาพ<\u002Fdt>\n <dd class=\"text-lg font-medium text-gray-900\">98.3%<\u002Fdd>\n <\u002Fdl>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <div class=\"bg-gray-50 px-5 py-3\">\n <div class=\"text-sm\">\n <span class=\"text-green-600 font-medium\">+0.8%<\u002Fspan>\n <span class=\"text-gray-500\"> จากสัปดาห์ที่แล้ว<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Chart Section -->\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n <div class=\"bg-white shadow rounded-lg\">\n <div class=\"p-6\">\n <h3 class=\"text-lg font-medium text-gray-900 mb-4\">แนวโน้มรายได้<\u002Fh3>\n <div class=\"h-64 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg flex items-center justify-center\">\n <div class=\"text-center\">\n <div class=\"text-4xl mb-2\">📈<\u002Fdiv>\n <p class=\"text-gray-600\">กราฟแสดงรายได้<\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <div class=\"bg-white shadow rounded-lg\">\n <div class=\"p-6\">\n <h3 class=\"text-lg font-medium text-gray-900 mb-4\">กิจกรรมผู้ใช้<\u002Fh3>\n <div class=\"h-64 bg-gradient-to-br from-green-50 to-emerald-100 rounded-lg flex items-center justify-center\">\n <div class=\"text-center\">\n <div class=\"text-4xl mb-2\">👥<\u002Fdiv>\n <p class=\"text-gray-600\">กราฟผู้ใช้งาน<\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fmain>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ส่วนที่ 5: เทคนิคขั้นสูงและ Best Practices\u003C\u002Fh2>\u003Ch3>เทคนิค 1: Place Items และ Place Content\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8 p-6\">\n <!-- Place Items - จัดตำแหน่ง items แต่ละตัว -->\n <div>\n <h3 class=\"text-lg font-semibold mb-4\">Place Items (จัดตำแหน่งแต่ละ item)<\u002Fh3>\n <div class=\"grid grid-cols-3 gap-4 place-items-center h-32 bg-gray-100 p-4\">\n <div class=\"bg-blue-500 text-white p-2 w-16 h-16 flex items-center justify-center\">1<\u002Fdiv>\n <div class=\"bg-green-500 text-white p-2 w-20 h-20 flex items-center justify-center\">2<\u002Fdiv>\n <div class=\"bg-red-500 text-white p-2 w-12 h-12 flex items-center justify-center\">3<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n \n <!-- Place Content - จัดตำแหน่ง grid ทั้งหมด -->\n <div>\n <h3 class=\"text-lg font-semibold mb-4\">Place Content (จัดตำแหน่ง grid ทั้งหมด)<\u002Fh3>\n <div class=\"grid grid-cols-2 gap-4 place-content-center h-64 bg-gray-100 p-4\">\n <div class=\"bg-purple-500 text-white p-4 text-center\">A<\u002Fdiv>\n <div class=\"bg-pink-500 text-white p-4 text-center\">B<\u002Fdiv>\n <div class=\"bg-indigo-500 text-white p-4 text-center\">C<\u002Fdiv>\n <div class=\"bg-cyan-500 text-white p-4 text-center\">D<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิค 2: Aspect Ratio Utilities\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8 p-6\">\n <h3 class=\"text-lg font-semibold mb-4\">Aspect Ratio Control<\u002Fh3>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <!-- 16:9 Video -->\n <div class=\"aspect-video bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center\">\n <span class=\"text-white font-medium\">16:9 Video<\u002Fspan>\n <\u002Fdiv>\n \n <!-- 1:1 Square -->\n <div class=\"aspect-square bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center\">\n <span class=\"text-white font-medium\">1:1 Square<\u002Fspan>\n <\u002Fdiv>\n \n <!-- 4:3 Traditional -->\n <div class=\"aspect-[4\u002F3] bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center\">\n <span class=\"text-white font-medium\">4:3 Traditional<\u002Fspan>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิค 3: Order Utilities สำหรับ Flexbox\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8 p-6\">\n <h3 class=\"text-lg font-semibold mb-4\">Flexbox Order Control<\u002Fh3>\n \n <!-- Desktop Order -->\n <div class=\"flex flex-col md:flex-row gap-4 bg-gray-100 p-4 rounded-lg\">\n <div class=\"flex-1 bg-blue-500 text-white p-4 order-3 md:order-1\">\n <h4 class=\"font-bold\">Main Content<\u002Fh4>\n <p class=\"text-blue-100\">ลำดับที่ 1 บน desktop, ลำดับที่ 3 บน mobile<\u002Fp>\n <\u002Fdiv>\n \n <div class=\"w-full md:w-64 bg-green-500 text-white p-4 order-1 md:order-2\">\n <h4 class=\"font-bold\">Sidebar<\u002Fh4>\n <p class=\"text-green-100\">ลำดับที่ 2 บน desktop, ลำดับที่ 1 บน mobile<\u002Fp>\n <\u002Fdiv>\n \n <div class=\"w-full md:w-48 bg-red-500 text-white p-4 order-2 md:order-3\">\n <h4 class=\"font-bold\">Ads<\u002Fh4>\n <p class=\"text-red-100\">ลำดับที่ 3 บน desktop, ลำดับที่ 2 บน mobile<\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>เทคนิค 4: Layout Animation ที่เหมาะสม\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><div class=\"space-y-8 p-6\">\n <h3 class=\"text-lg font-semibold mb-4\">Performance-Optimized Layout Animations<\u002Fh3>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <!-- Transform-based Animation -->\n <div class=\"bg-blue-500 text-white p-6 rounded-lg transform hover:scale-105 transition-transform duration-300 cursor-pointer\">\n <h4 class=\"font-bold mb-2\">Scale Transform<\u002Fh4>\n <p class=\"text-blue-100\">ใช้ transform สำหรับ performance ที่ดี<\u002Fp>\n <\u002Fdiv>\n \n <!-- Translate Animation -->\n <div class=\"bg-green-500 text-white p-6 rounded-lg transform hover:-translate-y-2 transition-transform duration-300 cursor-pointer\">\n <h4 class=\"font-bold mb-2\">Translate Movement<\u002Fh4>\n <p class=\"text-green-100\">ใช้ translate สำหรับการเคลื่อนไหวที่นุ่มนวล<\u002Fp>\n <\u002Fdiv>\n \n <!-- Opacity Animation -->\n <div class=\"bg-purple-500 text-white p-6 rounded-lg hover:opacity-80 transition-opacity duration-300 cursor-pointer\">\n <h4 class=\"font-bold mb-2\">Opacity Change<\u002Fh4>\n <p class=\"text-purple-100\">เปลี่ยน opacity แทนการซ่อน\u002Fแสดง<\u002Fp>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>ข้อผิดพลาดที่ควรหลีกเลี่ยง\u003C\u002Fh2>\u003Ch3>❌ ผิด: ใช้ Flexbox สำหรับ Layout ที่ซับซ้อน\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ไม่แนะนำ: ใช้ Flexbox สำหรับ Layout 2 มิติ -->\n<div class=\"flex flex-wrap\">\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1\u002F4\">Sidebar<\u002Fdiv>\n <div class=\"flex-1\">\n <div class=\"h-32\">Header<\u002Fdiv>\n <div class=\"flex-1\">Content<\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>✅ ถูก: ใช้ Grid สำหรับ Layout ที่ซับซ้อน\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- แนะนำ: ใช้ Grid สำหรับ Layout 2 มิติ -->\n<div class=\"grid grid-cols-4 grid-rows-[auto_1fr] h-screen gap-4\">\n <header class=\"col-span-4 bg-blue-500 text-white p-4\">Header<\u002Fheader>\n <aside class=\"bg-gray-100 p-4\">Sidebar<\u002Faside>\n <main class=\"col-span-3 bg-white p-4\">Content<\u002Fmain>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>❌ ผิด: ลืมทำ Responsive\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ไม่แนะนำ: Layout ที่ไม่ responsive -->\n<div class=\"grid grid-cols-4 gap-4\">\n <div>Item 1<\u002Fdiv>\n <div>Item 2<\u002Fdiv>\n <div>Item 3<\u002Fdiv>\n <div>Item 4<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>✅ ถูก: Layout ที่ Responsive\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- แนะนำ: Layout ที่ responsive -->\n<div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <div>Item 1<\u002Fdiv>\n <div>Item 2<\u002Fdiv>\n <div>Item 3<\u002Fdiv>\n <div>Item 4<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>❌ ผิด: การใช้ Animation ที่กิน Performance\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ไม่แนะนำ: เปลี่ยน width\u002Fheight -->\n<div class=\"w-32 hover:w-64 transition-all duration-300\">Performance Heavy<\u002Fdiv>\n\n<!-- ไม่แนะนำ: เปลี่ยน margin\u002Fpadding -->\n<div class=\"ml-4 hover:ml-8 transition-all duration-300\">Layout Thrashing<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>✅ ถูก: การใช้ Animation ที่ Performance ดี\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- แนะนำ: ใช้ transform -->\n<div class=\"transform hover:scale-150 transition-transform duration-300\">Good Performance<\u002Fdiv>\n\n<!-- แนะนำ: ใช้ opacity -->\n<div class=\"opacity-100 hover:opacity-50 transition-opacity duration-300\">Smooth Transition<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Ch2>Performance Tips และ Accessibility\u003C\u002Fh2>\u003Ch3>1. Performance Optimization\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- ใช้ transform สำหรับ Animation ที่นุ่มนวล -->\n<div class=\"transform hover:scale-105 transition-transform duration-300\">\n Optimized Animation\n<\u002Fdiv>\n\n<!-- หลีกเลี่ยงการเปลี่ยน layout properties -->\n<div class=\"transform hover:translate-x-4 transition-transform\">\n ✅ ดี: ใช้ transform\n<\u002Fdiv>\n\n<div class=\"ml-4 hover:ml-8 transition-all\">\n ❌ ไม่ดี: เปลี่ยน margin\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>2. Accessibility Best Practices\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- Focus States ที่ชัดเจน -->\n<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\">\n Accessible Button\n<\u002Fbutton>\n\n<!-- Skip Links สำหรับ Screen Reader -->\n<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\">\n Skip to main content\n<\u002Fa>\n\n<!-- Semantic HTML Structure -->\n<main id=\"main-content\" class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n <article class=\"lg:col-span-2\">\n <h1 class=\"text-2xl font-bold mb-4\">Article Title<\u002Fh1>\n <p>Article content...<\u002Fp>\n <\u002Farticle>\n \n <aside class=\"bg-gray-100 p-4 rounded-lg\">\n <h2 class=\"text-lg font-semibold mb-3\">Related Links<\u002Fh2>\n <nav aria-label=\"Related content\">\n <ul class=\"space-y-2\">\n <li><a href=\"#\" class=\"text-blue-600 hover:text-blue-800 focus:outline-none focus:underline\">Related Article 1<\u002Fa><\u002Fli>\n <li><a href=\"#\" class=\"text-blue-600 hover:text-blue-800 focus:outline-none focus:underline\">Related Article 2<\u002Fa><\u002Fli>\n <\u002Ful>\n <\u002Fnav>\n <\u002Faside>\n<\u002Fmain>\n\n<!-- สีที่มี contrast เพียงพอ -->\n<div class=\"bg-blue-600 text-white p-4\">\n ✅ ดี: Contrast ratio 4.5:1+\n<\u002Fdiv>\n\n<div class=\"bg-blue-300 text-blue-400 p-4\">\n ❌ ไม่ดี: Contrast ไม่เพียงพอ\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>3. Browser Compatibility Tips\u003C\u002Fh3>\u003Cp>\u003Cstrong>หมายเหตุสำคัญ\u003C\u002Fstrong>: ฟีเจอร์ต่างๆ มีการรองรับที่แตกต่างกัน\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><!-- CSS Grid - รองรับใน browser สมัยใหม่ทุกตัว -->\n<div class=\"grid grid-cols-3 gap-4\">\n <!-- Grid content -->\n<\u002Fdiv>\n\n<!-- Flexbox - รองรับใน browser สมัยใหม่ทุกตัว -->\n<div class=\"flex items-center justify-center\">\n <!-- Flex content -->\n<\u002Fdiv>\n\n<!-- Aspect Ratio - รองรับใน browser สมัยใหม่ -->\n<div class=\"aspect-video bg-gray-200\">\n <!-- Modern browsers -->\n<\u002Fdiv>\n\n<!-- Fallback สำหรับ browser เก่า -->\n<div class=\"relative w-full\" style=\"padding-bottom: 56.25%;\"> <!-- 16:9 ratio -->\n <div class=\"absolute inset-0 bg-gray-200\">\n <!-- Legacy browsers -->\n <\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3>4. Debugging Layout Issues\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-html\"><!-- เพิ่ม border ชั่วคราวเพื่อ debug -->\n<div class=\"grid grid-cols-3 gap-4 border-2 border-red-500\">\n <div class=\"border border-blue-500\">Item 1<\u002Fdiv>\n <div class=\"border border-green-500\">Item 2<\u002Fdiv>\n <div class=\"border border-purple-500\">Item 3<\u002Fdiv>\n<\u002Fdiv>\n\n<!-- ใช้ background สี debug -->\n<div class=\"flex bg-yellow-100\">\n <div class=\"flex-1 bg-red-100 p-4\">Flexible<\u002Fdiv>\n <div class=\"flex-none w-32 bg-blue-100 p-4\">Fixed<\u002Fdiv>\n<\u002Fdiv>\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>CSS สำหรับ debug (ใส่ใน development เท่านั้น)\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">\u002F* Debug borders *\u002F\n.debug * {\n border: 1px solid red !important;\n}\n\n\u002F* Debug grid *\u002F\n.debug-grid {\n background-image: \n linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px);\n background-size: 20px 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch3>สรุป\u003C\u002Fh3>\u003Cp>ใน EP 4 นี้ เราได้เรียนรู้การสร้าง Layout ด้วย Flexbox และ Grid อย่างเป็นระบบ:\u003C\u002Fp>\u003Ch4>สิ่งสำคัญที่ได้เรียนรู้:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>Flexbox\u003C\u002Fstrong> เหมาะสำหรับ Layout 1 มิติ และการจัดเรียงองค์ประกอบ\u003C\u002Fli>\u003Cli>\u003Cstrong>Grid\u003C\u002Fstrong> เหมาะสำหรับ Layout 2 มิติ และการสร้าง Layout ที่ซับซ้อน\u003C\u002Fli>\u003Cli>\u003Cstrong>Responsive Design\u003C\u002Fstrong> ที่เริ่มจาก Mobile-First เป็นแนวปฏิบัติที่ดี\u003C\u002Fli>\u003Cli>\u003Cstrong>Layout Patterns\u003C\u002Fstrong> ที่ใช้งานได้จริง ในโลกจริง\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance Tips\u003C\u002Fstrong> และ Accessibility ที่ควรคำนึงถึง\u003C\u002Fli>\u003Cli>\u003Cstrong>Browser Compatibility\u003C\u002Fstrong> และการ debug layout issues\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>เทคนิคสำคัญที่ต้องจำ:\u003C\u002Fh4>\u003Cul>\u003Cli>\u003Cstrong>ใช้ Flexbox สำหรับ\u003C\u002Fstrong>: Navigation, Button groups, Form controls\u003C\u002Fli>\u003Cli>\u003Cstrong>ใช้ Grid สำหรับ\u003C\u002Fstrong>: Page layouts, Card grids, Dashboard layouts\u003C\u002Fli>\u003Cli>\u003Cstrong>Mobile-First Strategy\u003C\u002Fstrong>: เริ่มจาก grid-cols-1 แล้วขยายไป desktop\u003C\u002Fli>\u003Cli>\u003Cstrong>Performance-first Animation\u003C\u002Fstrong>: ใช้ transform และ opacity แทน layout properties\u003C\u002Fli>\u003Cli>\u003Cstrong>Accessibility\u003C\u002Fstrong>: ใช้ semantic HTML, focus states, และ proper contrast\u003C\u002Fli>\u003C\u002Ful>\u003Ch4>ข้อผิดพลาดที่ควรหลีกเลี่ยง:\u003C\u002Fh4>\u003Cul>\u003Cli>❌ ใช้ Flexbox สำหรับ Layout 2 มิติที่ซับซ้อน\u003C\u002Fli>\u003Cli>❌ ลืมทำ Responsive Design\u003C\u002Fli>\u003Cli>❌ ใช้ Animation ที่เปลี่ยน layout properties\u003C\u002Fli>\u003Cli>❌ ไม่คำนึงถึง Accessibility\u003C\u002Fli>\u003Cli>❌ ไม่ตรวจสอบ Browser Compatibility\u003C\u002Fli>\u003C\u002Ful>\u003Cp>การเชี่ยวชาญ Flexbox และ Grid จะทำให้คุณสร้าง Layout ได้อย่างมืออาชีพ ไม่ว่าจะเป็น Dashboard, E-commerce, หรือ Blog Layout ซับซ้อนแค่ไหนก็สามารถจัดการได้อย่างง่ายดาย\u003C\u002Fp>\u003Cp>\u003Cstrong>EP 5\u003C\u002Fstrong> เรื่อง \u003Ci>\"Responsive Design ด้วย Tailwind: จอเล็ก-จอใหญ่ สวยครบทุกขนาด\"\u003C\u002Fi> เราจะมาเรียนรู้เทคนิคการสร้าง Responsive Design ขั้นสูง การใช้ Breakpoints อย่างเซียน Mobile-First Strategy และการทำ Progressive Enhancement ที่ทำให้เว็บไซต์ใช้งานได้ดีในทุกอุปกรณ์\u003C\u002Fp>\u003Cp>พร้อมที่จะเป็นมาสเตอร์ Responsive Design แล้วใช่ไหม? ติดตาม \u003Cstrong>Superdev School\u003C\u002Fstrong> เพื่อไม่พลาดเทคนิคการสร้าง Layout ที่ตอบสนองได้ในทุกสถานการณ์!\u003C\u002Fp>\u003Cp>การเข้าใจ Layout เป็นพื้นฐานที่สำคัญของการออกแบบเว็บไซต์ ตอนนี้คุณมีเครื่องมือที่จำเป็นแล้ว มาสร้าง Layout ที่สวยงามและใช้งานง่ายด้วย Tailwind CSS กันเถอะ! 🎯\u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">\u003Cstrong>Superdev School  (Superdev)\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">\u003Cstrong>superdevschool\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp class=\"\" data-start=\"5978\" data-end=\"6095\">\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002F\">\u003Cstrong>www.superdev.school\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","7_11zon_1_kaa8rkn25b.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fhdisx1k2ikii3jo\u002F7_11zon_1_kaa8rkn25b.webp","2026-03-04 08:26:48.938Z","",{"keywords":15,"locale":38,"school_blog":48},[16,23,28,33],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:26:46.068Z","vwicp9zcfmih6ds","Flexbox Tailwind","2026-04-10 16:07:34.547Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:26:46.801Z","q0atyzx9rkfgx3x","CSS Grid Tailwind","2026-04-10 16:07:34.843Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:26:48.003Z","e4cqejpue44rp0n","Layout Tailwind CSS","2026-04-10 16:07:35.129Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:26:48.386Z","nqyk67on9xhwyee","CSS Layout Patterns","2026-04-10 16:07:35.213Z",{"code":39,"collectionId":40,"collectionName":41,"created":42,"flag":43,"id":44,"is_default":45,"label":46,"updated":47},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":49,"collectionId":50,"collectionName":51,"expand":52,"id":66,"views":67},"i22e96fj41lsws7","pbc_2105096300","school_blogs",{"category":53},{"blogIds":54,"collectionId":55,"collectionName":56,"created":57,"created_by":13,"id":49,"image":58,"image_alt":13,"image_path":59,"label":60,"name":61,"priority":62,"publish_at":63,"scheduled_at":13,"status":64,"updated":65,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:26:33.946Z","vzv2yduhfk_hs035tvsww.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fi22e96fj41lsws7\u002Fvzv2yduhfk_hs035tvsww.webp",{"en":61,"th":61},"Tailwind CSS",10,"2025-07-25 05:27:14.926Z","published","2026-04-25 02:32:14.403Z","nblcw7hw1voheyl",286,"hdisx1k2ikii3jo",[20,25,30,35],"2025-07-22 03:54:44.995Z","เชี่ยวชาญ Flexbox และ CSS Grid ใน Tailwind CSS แบบเป็นระบบ เรียนรู้ 5 ขั้นตอนการใช้ Flexbox การสร้าง Layout 2 มิติด้วย Grid Responsive Design และ Layout Patterns ที่ใช้งานได้จริง","ep4-flexbox-grid-tailwind-css-layout-patterns-thai","2026-04-25 02:47:19.199Z",1,{"th":72}]