Elementor เป็น Page Builder ยอดนิยมสำหรับ WordPress ที่ช่วยให้ผู้ใช้งานสามารถออกแบบหน้าเว็บไซต์ด้วยระบบลากและวาง โดยไม่จำเป็นต้องเขียนโค้ดทั้งหมดด้วยตัวเอง

ใน Elementor รุ่นปัจจุบัน ผู้ใช้งานสามารถเลือกสร้าง Layout ด้วย Container ได้ 2 รูปแบบหลัก ได้แก่

• Flexbox Container
• Grid Container

ทั้งสองรูปแบบสามารถใช้สร้างเว็บไซต์ Responsive และรองรับการวาง Widget เช่น รูปภาพ ข้อความ ปุ่ม วิดีโอ แบบฟอร์ม และ Container อื่น ๆ ได้เหมือนกัน

แต่ Flexbox และ Grid มีหลักการจัดวางที่แตกต่างกันอย่างชัดเจน

อธิบายง่าย ๆ คือ

Flexbox เหมาะกับการเรียงองค์ประกอบไปในทิศทางเดียว ส่วน Grid เหมาะกับการจัดองค์ประกอบเป็นแถวและคอลัมน์พร้อมกัน

ก่อนจะเปรียบเทียบว่าทั้งสองแบบต่างกันอย่างไร ควรทำความเข้าใจพัฒนาการของระบบ Layout ใน Elementor ก่อน

พัฒนาการของระบบ Layout ใน Elementor

ระบบ Layout ของ Elementor ไม่ได้เริ่มต้นจาก Flexbox หรือ Grid แต่พัฒนามาเป็นลำดับดังนี้

ยุคที่ 1: Section, Column และ Inner Section

Elementor รุ่นเดิมใช้โครงสร้างหลักที่ประกอบด้วย

Section
└── Column
    └── Widget

หากต้องการแบ่งพื้นที่ออกเป็นหลายส่วน ผู้ใช้งานจะต้องสร้าง Section แล้วแบ่งออกเป็น Column เช่น

Section
├── Column 1
├── Column 2
└── Column 3

หากต้องการสร้าง Layout ซ้อนอยู่ภายใน Column ก็ต้องเพิ่ม Inner Section เข้าไปอีกชั้นหนึ่ง

ตัวอย่างเช่น

Section
├── Column ซ้าย
└── Column ขวา
    └── Inner Section
        ├── Inner Column 1
        └── Inner Column 2

ระบบนี้เข้าใจง่ายสำหรับผู้เริ่มต้น แต่เมื่อออกแบบ Layout ที่ซับซ้อน จะต้องใช้ Section, Column และ Inner Section ซ้อนกันหลายระดับ ส่งผลให้โครงสร้างหน้าเว็บมี Wrapper หรือองค์ประกอบ HTML เพิ่มขึ้นตามไปด้วย

ยุคที่ 2: Elementor เปลี่ยนมาใช้ Flexbox Container

ต่อมา Elementor พัฒนา Flexbox Container เพื่อใช้เป็นทางเลือกใหม่และแทนที่ระบบ Section, Column และ Inner Section แบบเดิม

คู่มือของ Elementor ระบุว่า Flexbox Container ถูกออกแบบมาเพื่อแทนความสามารถของ Section, Column และ Inner Section พร้อมเพิ่มความยืดหยุ่นในการควบคุมความกว้าง ความสูง ลำดับ และตำแหน่งขององค์ประกอบภายใน Container

จากโครงสร้างเดิมที่ต้องใช้ Section และ Column

Section
├── Column 1
└── Column 2

เมื่อเปลี่ยนมาใช้ Container จะกลายเป็น

Parent Container
├── Child Container 1
└── Child Container 2

Container สามารถบรรจุได้ทั้ง Widget และ Container ย่อย โดยไม่จำเป็นต้องสร้าง Section หรือ Inner Section เพิ่ม

Elementor ระบุว่า Container ช่วยให้ควบคุม Responsive Design ได้ละเอียดขึ้น และอาจช่วยลดโครงสร้าง HTML ที่ไม่จำเป็นเมื่อเทียบกับ Section และ Column แบบเดิม เนื่องจากไม่ต้องใช้หลาย Wrapper เพื่อแบ่ง Layout

ยุคที่ 3: Elementor เพิ่ม Grid Container

หลังจากใช้ Flexbox Container เป็นโครงสร้างหลักแล้ว Elementor ได้เพิ่ม Grid Container เข้ามาเป็น Container อีกรูปแบบหนึ่ง

Grid Container ไม่ได้เข้ามาแทน Flexbox ทั้งหมด แต่เพิ่มตัวเลือกสำหรับ Layout ที่ต้องควบคุมทั้งแถวและคอลัมน์

Elementor อธิบายว่า Grid Container คือ Container ที่ประกอบด้วยช่องหรือ Cells ซึ่งจัดเรียงอยู่ในรูปแบบ Rows และ Columns ผู้ใช้งานสามารถกำหนดจำนวนแถวและคอลัมน์ได้โดยไม่ต้องลาก Container ย่อยเข้ามาสร้างทีละช่อง

ใน Elementor รุ่นปัจจุบัน เมื่อเลือก Container ผู้ใช้งานสามารถกำหนด Container Type ได้ว่าเป็น

• Flexbox
• Grid

Grid จึงเป็นส่วนขยายของระบบ Container ไม่ใช่การย้อนกลับไปใช้ Section และ Column แบบเดิม

Flexbox Container คืออะไร?

Flexbox เป็นระบบ Layout แบบ One-dimensional Layout หรือการจัดวางตามแกนหลักหนึ่งแกน

องค์ประกอบภายใน Flexbox จะถูกจัดเรียงในทิศทางหลักแบบใดแบบหนึ่ง ได้แก่

• แนวนอน หรือ Row
• แนวตั้ง หรือ Column

ตัวอย่างเช่น หากต้องการสร้าง Header ที่มีโลโก้ เมนู และปุ่มติดต่อเรียงจากซ้ายไปขวา สามารถใช้ Flexbox Direction แบบ Row

Flexbox Container — Row
├── Logo
├── Navigation Menu
└── Contact Button

หากต้องการสร้างการ์ดที่มีรูปภาพ หัวข้อ รายละเอียด และปุ่มเรียงจากบนลงล่าง สามารถใช้ Flexbox Direction แบบ Column

Flexbox Container — Column
├── Image
├── Heading
├── Description
└── Button

Flexbox เหมาะกับองค์ประกอบที่มีการไหลไปในทิศทางเดียว และต้องการควบคุมการจัดตำแหน่ง การกระจายพื้นที่ หรือลำดับของรายการ

WPMet สรุปหลักการของ Flexbox ว่าเป็น Layout แบบหนึ่งมิติ เหมาะกับการจัดรายการในแถวหรือคอลัมน์ เช่น เมนู กลุ่มปุ่ม Hero Section และองค์ประกอบภายในการ์ด

ตัวเลือกสำคัญของ Flexbox ใน Elementor

Direction

กำหนดทิศทางการเรียง Widget หรือ Child Container

• Row: เรียงจากซ้ายไปขวา
• Column: เรียงจากบนลงล่าง
• Row Reverse: เรียงแนวนอนแบบย้อนกลับ
• Column Reverse: เรียงแนวตั้งแบบย้อนกลับ

Justify Content

ใช้จัดตำแหน่งและกระจายพื้นที่ตามแกนหลัก เช่น

• Start
• Center
• End
• Space Between
• Space Around
• Space Evenly

Align Items

ใช้จัดตำแหน่งตามแกนรอง เช่น จัดให้อยู่ด้านบน ตรงกลาง ด้านล่าง หรือยืดองค์ประกอบให้มีขนาดเต็มพื้นที่

Wrap

กำหนดให้องค์ประกอบขึ้นบรรทัดใหม่เมื่อพื้นที่ภายใน Container ไม่เพียงพอ

ตัวอย่างเช่น มีการ์ด 4 ใบเรียงในแนวนอน เมื่อพื้นที่บนโทรศัพท์มือถือไม่พอ ระบบสามารถ Wrap การ์ดลงมาบรรทัดถัดไปได้

Gap

ใช้กำหนดระยะห่างระหว่าง Widget หรือ Container ย่อย โดยไม่ต้องใส่ Margin ให้แต่ละรายการแยกกัน

Grid Container คืออะไร?

Grid เป็นระบบ Layout แบบ Two-dimensional Layout หรือการจัดวางสองมิติ

Grid สามารถควบคุมได้ทั้ง

• Rows หรือแถว
• Columns หรือคอลัมน์

พร้อมกันภายใน Container เดียว

ตัวอย่างเช่น ต้องการแสดงบริการ 6 รายการในรูปแบบ 3 คอลัมน์ 2 แถว

Grid Container — 3 Columns × 2 Rows

┌──────────┬──────────┬──────────┐
│ Service 1│ Service 2│ Service 3│
├──────────┼──────────┼──────────┤
│ Service 4│ Service 5│ Service 6│
└──────────┴──────────┴──────────┘

ผู้ใช้งานไม่จำเป็นต้องสร้าง Container สำหรับแถวแรกและแถวที่สองแยกจากกัน เพียงสร้าง Grid Container แล้วกำหนดจำนวน Columns และ Rows เท่านั้น

Elementor ระบุว่า Grid Container ช่วยสร้าง Layout แบบสมมาตรและช่วยให้องค์ประกอบอยู่ในแนวเดียวกัน โดยไม่จำเป็นต้องใช้ Container หลายชุดเพื่อสร้างแต่ละแถวหรือแต่ละคอลัมน์

ตัวเลือกสำคัญของ Grid ใน Elementor

Columns

กำหนดจำนวนคอลัมน์ภายใน Grid เช่น

• 2 Columns
• 3 Columns
• 4 Columns

Elementor ใช้หน่วย FR หรือ Fraction เป็นค่าเริ่มต้นสำหรับแบ่งพื้นที่ เช่น

1fr 1fr 1fr

หมายถึงแบ่ง Grid ออกเป็น 3 คอลัมน์ที่มีความกว้างเท่ากัน

แต่สามารถกำหนดขนาดไม่เท่ากันได้ เช่น

2fr 1fr

หมายถึงคอลัมน์แรกมีพื้นที่มากกว่าคอลัมน์ที่สองประมาณสองเท่า

Rows

กำหนดจำนวนแถวและความสูงของแต่ละแถว

ตัวอย่างเช่น

200px 1fr 400px

หมายถึง

• แถวแรกสูง 200px
• แถวที่สองใช้พื้นที่ที่เหลือ
• แถวที่สามสูง 400px

Elementor รองรับทั้งหน่วย FR และค่ากำหนดเอง เช่น PX, EM และ REM สำหรับขนาดของ Rows และ Columns

Grid Outline

แสดงหรือซ่อนเส้นขอบของแต่ละ Cell ภายใน Elementor Editor เพื่อช่วยให้เห็นโครงสร้างของ Grid ขณะออกแบบ

เส้นเหล่านี้ใช้สำหรับช่วยจัด Layout ในหน้า Editor และไม่ได้หมายความว่าจะต้องแสดงบนหน้าเว็บไซต์จริง

Autoflow

กำหนดทิศทางการเติม Widget ลงใน Grid

• Row: เติมจากซ้ายไปขวา แล้วขึ้นแถวใหม่
• Column: เติมจากบนลงล่าง แล้วขึ้นคอลัมน์ใหม่

Gap

กำหนดระยะห่างระหว่างแต่ละ Cell ทั้งแนวนอนและแนวตั้ง

Column Span และ Row Span

กำหนดให้ Widget หนึ่งรายการครอบหลายคอลัมน์หรือหลายแถวได้

ตัวอย่างเช่น การ์ดเด่นอาจครอบพื้นที่ 2 คอลัมน์และ 2 แถว

┌─────────────────────┬──────────┐
│                     │ Card 2   │
│   Featured Card     ├──────────┤
│                     │ Card 3   │
└─────────────────────┴──────────┘

Elementor รองรับการกำหนด Column Span และ Row Span เพื่อสร้าง Gallery, Dashboard หรือ Bento Grid ที่มีองค์ประกอบหลายขนาดอยู่ใน Grid เดียวกัน

Elementor Flexbox กับ Grid ต่างกันอย่างไร?

หัวข้อ	Flexbox Container	Grid Container
รูปแบบ Layout	หนึ่งมิติ	สองมิติ
การควบคุมหลัก	Row หรือ Column	Rows และ Columns พร้อมกัน
ลักษณะการวาง	เรียงตามลำดับและทิศทาง	วางลงใน Cell ของตาราง
เหมาะกับ	Layout ที่ไหลไปในทิศทางเดียว	Layout แบบตาราง
การขึ้นบรรทัดใหม่	ใช้ Wrap	กำหนดจำนวน Columns และ Rows
การควบคุมแนวตรงกัน	เหมาะกับรายการในแกนเดียว	ควบคุมแนวทั้งสองแกนได้ดีกว่า
การทำ Layout หลายขนาด	มักต้องใช้ Nested Container	ใช้ Row Span และ Column Span
Responsive	เปลี่ยน Row เป็น Column ได้ง่าย	เปลี่ยนจำนวน Columns ได้ง่าย
ตัวอย่างงาน	Header, Hero, Menu, Button Group	Product Grid, Gallery, Services, Dashboard

Flexbox ไม่ได้เหมือนกับ Column แบบเดิม

แม้ Flexbox จะสามารถสร้าง Layout แบบหลายคอลัมน์ได้ แต่ไม่ได้ทำงานเหมือนระบบ Column แบบเดิมของ Elementor

ระบบเดิมบังคับให้โครงสร้างเป็นลำดับประมาณนี้

Section
└── Columns
    └── Widgets

แต่ Flexbox ใช้ความสัมพันธ์ระหว่าง Parent Container และ Child Items

Flexbox Parent
├── Child Item
├── Child Item
└── Child Item

Child Item อาจเป็น Widget หรือ Container ย่อยก็ได้ และสามารถกำหนดให้แต่ละรายการ

• ขยายตามพื้นที่ว่าง
• หดตามขนาดหน้าจอ
• เปลี่ยนลำดับ
• เปลี่ยน Direction
• Wrap ลงบรรทัดใหม่
• มีความกว้างแตกต่างกัน

Flexbox จึงไม่ใช่เพียงการเปลี่ยนชื่อจาก Section และ Column เป็น Container แต่เป็นการเปลี่ยนหลักการจัด Layout ให้ยืดหยุ่นกว่าเดิม

Elementor ระบุว่า Container ไม่ถูกจำกัดด้วยโครงสร้าง Section และ Column แบบเดิม ผู้ใช้งานสามารถกำหนดขนาดและซ้อน Container เพื่อสร้าง Layout ที่ซับซ้อนได้มากขึ้น

ควรใช้ Flexbox เมื่อไร?

1. Header และ Navigation

ตัวอย่างเช่น

Logo | Menu | Search | Contact Button

องค์ประกอบทั้งหมดเรียงอยู่ในแนวนอน จึงเหมาะกับ Flexbox แบบ Row

สามารถใช้ Justify Content แบบ Space Between เพื่อแยกโลโก้ไปทางซ้าย และเมนูกับปุ่มไปทางขวา

2. Hero Section

Hero Section ที่มีข้อความอยู่ด้านซ้ายและรูปภาพอยู่ด้านขวา เหมาะกับ Flexbox

Flexbox Parent — Row
├── Content Container
└── Image Container

บนโทรศัพท์มือถือสามารถเปลี่ยน Direction จาก Row เป็น Column ได้โดยไม่ต้องสร้าง Layout ใหม่

3. กลุ่มปุ่ม

เช่น

[ดูรายละเอียด] [ติดต่อเรา]

สามารถใช้ Flexbox แบบ Row และกำหนด Gap ระหว่างปุ่ม

4. Icon และข้อความ

เช่น ไอคอนโทรศัพท์อยู่ด้านซ้ายและหมายเลขโทรศัพท์อยู่ด้านขวา

☎ 02-000-0000

Layout ลักษณะนี้มีองค์ประกอบเรียงในแนวเดียว จึงไม่จำเป็นต้องใช้ Grid

5. เนื้อหาภายในการ์ด

ภายในการ์ดสามารถใช้ Flexbox แบบ Column เพื่อเรียงองค์ประกอบดังนี้

Image
Heading
Description
Button

หากต้องการให้ปุ่มของทุกการ์ดอยู่ด้านล่าง สามารถกำหนดความสูงของการ์ดและใช้การกระจายพื้นที่ภายใน Flexbox ได้

ควรใช้ Grid เมื่อไร?

1. Product Grid

ตัวอย่างหน้าสินค้าที่ต้องการแสดง

• Desktop: 4 คอลัมน์
• Tablet: 2 คอลัมน์
• Mobile: 1 คอลัมน์

Grid ช่วยให้กำหนดจำนวนคอลัมน์ในแต่ละ Breakpoint ได้โดยตรง

2. Service Card

หากเว็บไซต์มีบริการ 6 หรือ 9 รายการ และต้องการให้ทุกการ์ดเรียงตรงกันทั้งแนวนอนและแนวตั้ง Grid จะควบคุมได้ง่ายกว่า Flexbox

3. Gallery

Grid เหมาะกับ Gallery ที่มีรูปภาพหลายขนาด และสามารถใช้ Column Span หรือ Row Span เพื่อทำให้รูปเด่นมีขนาดใหญ่กว่ารูปอื่น

4. Bento Grid

Bento Grid คือ Layout ที่ประกอบด้วยกล่องหลายขนาด เช่น

• กล่องใหญ่ 2×2
• กล่องแนวนอน 2×1
• กล่องเล็ก 1×1

Grid สามารถสร้าง Layout แบบนี้ได้โดยไม่ต้องซ้อน Flexbox Container หลายชั้น

5. Pricing Table

ตารางราคาที่ต้องการให้ชื่อแพ็กเกจ ราคา คุณสมบัติ และปุ่มของแต่ละคอลัมน์อยู่ในแนวเดียวกัน เหมาะกับ Grid มากกว่า

6. Dashboard

Dashboard มักประกอบด้วยการ์ดหลายขนาด เช่น ยอดขาย กราฟ รายงาน และสถิติ Grid ช่วยควบคุมตำแหน่งของแต่ละการ์ดได้อย่างเป็นระบบ

Flexbox และ Grid ใช้ร่วมกันได้หรือไม่?

Flexbox และ Grid สามารถใช้ร่วมกันได้ และเป็นแนวทางที่เหมาะกับเว็บไซต์จำนวนมาก

หลักการที่ใช้งานได้ดีคือ

ใช้ Grid จัดโครงสร้างภาพรวม และใช้ Flexbox จัดองค์ประกอบภายในแต่ละ Cell

ตัวอย่างเช่น ต้องการสร้าง Service Card จำนวน 6 ใบ

Grid Container — 3 Columns
├── Card 1 — Flexbox Column
├── Card 2 — Flexbox Column
├── Card 3 — Flexbox Column
├── Card 4 — Flexbox Column
├── Card 5 — Flexbox Column
└── Card 6 — Flexbox Column

Grid ทำหน้าที่จัดการ์ดทั้งหมดเป็น 3 คอลัมน์ ส่วน Flexbox ภายในการ์ดทำหน้าที่เรียง Icon, Heading, Description และ Button จากบนลงล่าง

WPMet ระบุว่าการใช้ Grid สำหรับโครงสร้างภายนอกและใช้ Flexbox ภายในแต่ละ Grid Cell เป็นรูปแบบที่พบได้ทั่วไปในการสร้างเว็บไซต์จริง

ตัวอย่างเปรียบเทียบ Flexbox กับ Grid

สมมติว่าต้องการสร้างการ์ดสินค้า 6 ใบ

สร้างด้วย Flexbox

สร้าง Parent Container แบบ Row แล้วเปิด Wrap

Flexbox Container — Row + Wrap
├── Product 1
├── Product 2
├── Product 3
├── Product 4
├── Product 5
└── Product 6

จากนั้นกำหนดความกว้างของแต่ละการ์ดเป็นประมาณหนึ่งในสามของพื้นที่

วิธีนี้เหมาะเมื่อรายการต้องไหลตามพื้นที่หน้าจอ และไม่จำเป็นต้องควบคุมตำแหน่งของแต่ละรายการอย่างละเอียด

สร้างด้วย Grid

สร้าง Grid Container แล้วกำหนดเป็น 3 Columns

Grid Container — 3 Columns
├── Product 1
├── Product 2
├── Product 3
├── Product 4
├── Product 5
└── Product 6

Grid จะจัดสินค้าเป็น 3 คอลัมน์ 2 แถวให้อัตโนมัติ

วิธีนี้เหมาะกว่าเมื่อ

• ต้องการให้คอลัมน์มีความกว้างเท่ากัน
• ต้องการให้แถวและคอลัมน์ตรงกัน
• ต้องการกำหนดตำแหน่งที่แน่นอน
• ต้องการให้สินค้าบางรายการครอบหลายช่อง

การทำ Responsive ด้วย Flexbox

ตัวอย่าง Hero Section

Desktop

Text | Image

กำหนด Direction เป็น Row

Tablet

อาจใช้ Row ต่อไป แต่ลดความกว้างของข้อความหรือรูปภาพ

Mobile

Text
Image

เปลี่ยน Direction เป็น Column

Flexbox จึงเหมาะกับ Layout ที่ต้องเปลี่ยนจากแนวนอนเป็นแนวตั้งตามขนาดหน้าจอ

การทำ Responsive ด้วย Grid

ตัวอย่าง Product Grid

Desktop

4 Columns

Tablet

2 Columns

Mobile

1 Column

Grid ช่วยให้เปลี่ยนจำนวน Columns ตาม Breakpoint ได้โดยไม่ต้องกำหนดความกว้างของการ์ดแต่ละใบใหม่ทั้งหมด

อย่างไรก็ตาม หากใช้ Column Span หรือกำหนดตำแหน่งแบบ Custom ควรตรวจสอบ Layout ในทุก Breakpoint เพราะตำแหน่งที่เหมาะกับ Desktop อาจไม่เหมาะกับ Mobile

Flexbox หรือ Grid แบบไหนโหลดเร็วกว่า?

ไม่ควรสรุปว่า Grid เร็วกว่า Flexbox หรือ Flexbox เร็วกว่า Grid ในทุกกรณี

ประสิทธิภาพของหน้าเว็บไซต์ขึ้นอยู่กับหลายปัจจัย เช่น

• จำนวน Widget
• จำนวน Container ที่ซ้อนกัน
• ขนาดและรูปแบบของรูปภาพ
• Animation
• ปลั๊กอิน
• JavaScript
• ฟอนต์
• ระบบ Cache
• Hosting

สิ่งที่ Elementor ระบุอย่างชัดเจนคือ Container สามารถสร้างโครงสร้างที่กระชับกว่าระบบ Section, Column และ Inner Section แบบเดิมได้ หากผู้ใช้งานไม่สร้าง Nested Container มากเกินความจำเป็น

Grid อาจช่วยลดจำนวน Container ใน Layout แบบตาราง เพราะสามารถกำหนด Rows และ Columns ภายใน Container เดียวได้ แต่ไม่ได้หมายความว่าการเปลี่ยนทุกส่วนของเว็บไซต์ให้เป็น Grid จะทำให้เว็บไซต์เร็วขึ้นเสมอไป

ควรเลือกใช้ตามลักษณะของ Layout มากกว่าการเลือกเพราะคิดว่าแบบใดแบบหนึ่งโหลดเร็วกว่า

ข้อผิดพลาดที่พบบ่อย

ใช้ Flexbox ซ้อนกันมากเกินไป

ผู้ใช้งานบางคนสร้าง Container แยกสำหรับทุก Row และ Column เพื่อจำลองตาราง ทั้งที่สามารถใช้ Grid Container เพียงชุดเดียวได้

ใช้ Grid กับ Layout ง่ายเกินไป

หากต้องการวางเพียงไอคอนกับข้อความ หรือปุ่มสองปุ่มเรียงกัน การใช้ Flexbox จะง่ายและแก้ไขสะดวกกว่า

ใช้ Width แบบตายตัวมากเกินไป

การกำหนดความกว้างเป็น Pixel ให้ทุกองค์ประกอบอาจทำให้หน้าเว็บล้นหน้าจอบนอุปกรณ์ขนาดเล็ก

ควรใช้ค่าที่ยืดหยุ่น เช่น

• Percentage
• FR
• Grow
• Shrink
• Max Width
• Min Width

ตามความเหมาะสม

ใช้ Margin แทน Gap ทุกจุด

หากต้องการระยะห่างที่เท่ากันระหว่างรายการ ควรใช้ Gap จาก Parent Container ก่อน เพราะควบคุมและแก้ไขได้ง่ายกว่า

ใช้ Grid Span โดยไม่ตรวจ Mobile

Layout แบบ Bento ที่สวยบน Desktop อาจเกิดช่องว่างหรือลำดับผิดปกติบน Mobile จึงควรตรวจ Row Span, Column Span และ Autoflow แยกตามแต่ละ Breakpoint

วิธีตัดสินใจว่าจะใช้ Flexbox หรือ Grid

ถามตัวเองตามลำดับต่อไปนี้

องค์ประกอบเรียงไปในทิศทางเดียวหรือไม่?

หากเรียงจากซ้ายไปขวาหรือบนลงล่าง ให้เริ่มจาก Flexbox

ต้องควบคุม Rows และ Columns พร้อมกันหรือไม่?

หากต้องการควบคุมทั้งสองแกน ให้เลือก Grid

ต้องการให้ทุกการ์ดอยู่ในแนวเดียวกันหรือไม่?

หากต้องการแนวตารางที่ชัดเจน Grid จะเหมาะกว่า

ต้องการให้บางรายการครอบหลายช่องหรือไม่?

ใช้ Grid พร้อม Column Span และ Row Span

ต้องการเพียงจัดองค์ประกอบให้อยู่ตรงกลางหรือกระจายพื้นที่หรือไม่?

ใช้ Flexbox จะง่ายกว่า

เป็นโครงสร้างภาพรวมหรือองค์ประกอบภายใน?

ใช้ Grid สำหรับโครงสร้างภาพรวม และใช้ Flexbox สำหรับเนื้อหาภายในแต่ละรายการ

สรุป Elementor Flexbox กับ Grid เลือกใช้อะไรดี?

พัฒนาการของ Elementor สามารถสรุปได้ดังนี้

Section / Column / Inner Section
              ↓
       Flexbox Container
              ↓
เพิ่ม Grid Container เป็นอีกทางเลือก

Flexbox Container เข้ามาแทนระบบ Section และ Column แบบเดิม โดยช่วยให้ผู้ใช้งานจัด Widget และ Container ย่อยได้ยืดหยุ่นขึ้น

Grid Container ไม่ได้เข้ามาแทน Flexbox แต่เข้ามาช่วยจัด Layout ที่ต้องควบคุม Rows และ Columns พร้อมกัน

เลือกใช้ตามหลักง่าย ๆ ดังนี้

เรียงเป็นเส้น ใช้ Flexbox
เรียงเป็นตาราง ใช้ Grid
Layout ซับซ้อน ใช้ทั้งสองแบบร่วมกัน

Flexbox เหมาะกับ Header, Navigation, Hero Section, กลุ่มปุ่ม และองค์ประกอบภายในการ์ด

Grid เหมาะกับ Product Grid, Service Card, Gallery, Portfolio, Pricing Table, Dashboard และ Bento Layout

เว็บไซต์ที่ออกแบบอย่างเหมาะสมจึงไม่จำเป็นต้องเลือกใช้เพียงแบบใดแบบหนึ่ง แต่ควรเลือก Flexbox หรือ Grid ให้ตรงกับหน้าที่ของแต่ละส่วน เพื่อให้โครงสร้างเข้าใจง่าย ทำ Responsive ได้สะดวก และลดการซ้อน Container ที่ไม่จำเป็น