CSS Grid vs Flexbox: การเลือกเครื่องมือ Layout ที่เหมาะสมสำหรับงาน

ในโลกของการพัฒนาเว็บที่มีการเปลี่ยนแปลงอยู่เสมอ การเชี่ยวชาญเทคนิคการจัดเลย์เอาต์ถือเป็นสิ่งสำคัญยิ่ง เครื่องมือจัดเลย์เอาต์ CSS ที่ทรงพลังสองตัวที่โดดเด่นคือ CSS Grid และ Flexbox แม้ว่าทั้งสองจะยอดเยี่ยมในการสร้างดีไซน์ที่ตอบสนองและไดนามิก แต่ก็มีจุดแข็งที่แตกต่างกันและเหมาะสมกับสถานการณ์ที่ต่างกันไป คู่มือนี้จะเจาะลึกแนวคิดหลักของแต่ละวิธี พร้อมทั้งตัวอย่างและการใช้งานจริงเพื่อช่วยให้คุณเลือกเครื่องมือที่เหมาะสมกับงานได้

ทำความเข้าใจพื้นฐาน

Flexbox คืออะไร?

Flexbox หรือชื่อเต็มคือ Flexible Box Layout เป็นโมเดลเลย์เอาต์แบบหนึ่งมิติ มีความสามารถโดดเด่นในการจัดสรรพื้นที่ระหว่างไอเท็มในแถวเดียวหรือคอลัมน์เดียว ลองนึกภาพการจัดเรียงไอเท็มในแถบนำทาง (navigation bar) หรือการกระจายองค์ประกอบภายในการ์ดคอมโพเนนต์ – Flexbox โดดเด่นในสถานการณ์เหล่านี้

แนวคิดหลัก:

• Flex Container: องค์ประกอบแม่ที่เก็บ flex items ประกาศโดยใช้ display: flex; หรือ display: inline-flex;
• Flex Items: องค์ประกอบลูกโดยตรงของ flex container
• Main Axis: ทิศทางหลักของ flex items (แนวนอนเป็นค่าเริ่มต้น)
• Cross Axis: แกนที่ตั้งฉากกับ main axis
• Flex Properties: คุณสมบัติต่างๆ เช่น flex-direction, justify-content, align-items, flex-grow, flex-shrink, และ flex-basis ใช้ควบคุมเลย์เอาต์และพฤติกรรมของ flex items

CSS Grid คืออะไร?

CSS Grid Layout เป็นระบบเลย์เอาต์แบบสองมิติ ช่วยให้คุณสามารถแบ่งหน้าเว็บออกเป็นแถวและคอลัมน์เพื่อสร้างโครงสร้างแบบตาราง ทำให้เหมาะอย่างยิ่งสำหรับเลย์เอาต์ที่ซับซ้อน เช่น ส่วนหัวของเว็บไซต์ (headers), ส่วนท้าย (footers), พื้นที่เนื้อหาหลัก และแถบด้านข้าง (sidebars) ลองนึกว่ามันเป็นเครื่องมืออันทรงพลังสำหรับสร้างสถาปัตยกรรมโดยรวมของหน้าเว็บของคุณ

แนวคิดหลัก:

• Grid Container: องค์ประกอบแม่ที่สร้างกริด ประกาศโดยใช้ display: grid; หรือ display: inline-grid;
• Grid Items: องค์ประกอบลูกโดยตรงของ grid container
• Grid Lines: เส้นแนวนอนและแนวตั้งที่กำหนดแถวและคอลัมน์ของกริด
• Grid Tracks: ช่องว่างระหว่างเส้นกริด (แถวหรือคอลัมน์)
• Grid Area: พื้นที่สี่เหลี่ยมที่กำหนดโดยเส้นกริด ซึ่งสามารถวาง grid items ได้
• Grid Properties: คุณสมบัติต่างๆ เช่น grid-template-rows, grid-template-columns, grid-gap, grid-row, grid-column, และ justify-items ใช้ควบคุมโครงสร้างของกริดและการวางตำแหน่งของไอเท็ม

Flexbox ในการใช้งานจริง: เลย์เอาต์แบบหนึ่งมิติ

Flexbox โดดเด่นอย่างแท้จริงเมื่อต้องจัดการกับเลย์เอาต์แบบหนึ่งมิติ นี่คือกรณีการใช้งานทั่วไปบางส่วน:

แถบนำทาง (Navigation Bars)

การสร้างแถบนำทางที่ตอบสนอง (responsive) เป็นการประยุกต์ใช้ Flexbox แบบคลาสสิก คุณสามารถจัดเรียงรายการนำทางในแนวนอน จัดช่องว่างให้เท่ากัน และจัดการกับส่วนที่ล้นออกมาบนหน้าจอขนาดเล็กได้อย่างง่ายดาย

<nav class="navbar">
  <a href="#" class="logo">Brand</a>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f0f0f0;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin-left: 1rem;
}

ตัวอย่างนี้แสดงให้เห็นว่า Flexbox สามารถกระจายพื้นที่ระหว่างโลโก้และลิงก์นำทางได้อย่างง่ายดาย ในขณะเดียวกันก็จัดตำแหน่งในแนวตั้งด้วย

คอมโพเนนต์การ์ด (Card Components)

การ์ดที่มักใช้แสดงข้อมูลผลิตภัณฑ์ บทความบล็อก หรือโปรไฟล์ผู้ใช้ ก็ได้รับประโยชน์จาก Flexbox คุณสามารถจัดเรียงเนื้อหาของการ์ด (รูปภาพ, ชื่อเรื่อง, คำอธิบาย, ปุ่ม) ในแนวตั้งหรือแนวนอนได้อย่างง่ายดาย ทำให้มั่นใจได้ว่ามีระยะห่างและการจัดตำแหน่งที่สม่ำเสมอ

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-content">
    <h2>Card Title</h2>
    <p>This is a short description of the card content.</p>
    <button>Learn More</button>
  </div>
</div>

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 1rem;
}

ในที่นี้ Flexbox จัดเรียงรูปภาพ ชื่อเรื่อง คำอธิบาย และปุ่มในแนวตั้งภายในบัตร การใช้ flex-direction: column; ช่วยให้มั่นใจว่าเนื้อหาจะเรียงซ้อนกันอย่างเหมาะสม

คอลัมน์ความสูงเท่ากัน

การสร้างคอลัมน์ที่มีความสูงเท่ากัน ซึ่งเป็นข้อกำหนดด้านการออกแบบที่พบบ่อยนั้น ทำได้ง่ายด้วย Flexbox โดยการใช้ display: flex; กับคอนเทนเนอร์แม่ และ flex: 1; กับแต่ละคอลัมน์ คอลัมน์เหล่านั้นจะยืดออกตามความสูงของคอลัมน์ที่สูงที่สุดโดยอัตโนมัติ

<div class="container">
  <div class="column">Column 1 - Some shorter content.</div>
  <div class="column">Column 2 - This column has more content. This column has more content. This column has more content. This column has more content.</div>
  <div class="column">Column 3</div>
</div>

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 1rem;
  border: 1px solid #eee;
}

คุณสมบัติ flex: 1; บอกให้แต่ละคอลัมน์ขยายตัวเท่าๆ กัน ส่งผลให้ได้คอลัมน์ที่มีความสูงเท่ากันโดยไม่คำนึงถึงความยาวของเนื้อหา

ขอบเขตของ CSS Grid: เลย์เอาต์แบบสองมิติ

CSS Grid โดดเด่นในการจัดการเลย์เอาต์แบบสองมิติ โดยให้การควบคุมโครงสร้างหน้าเว็บของคุณอย่างละเอียด นี่คือสถานการณ์สำคัญที่ Grid แสดงความสามารถได้ดีที่สุด:

เลย์เอาต์เว็บไซต์ (ส่วนหัว, ส่วนท้าย, แถบด้านข้าง)

สำหรับการวางโครงสร้างเลย์เอาต์โดยรวมของเว็บไซต์ (ส่วนหัว, การนำทาง, เนื้อหาหลัก, แถบด้านข้าง, ส่วนท้าย) CSS Grid เป็นตัวเลือกที่เหมาะสมที่สุด ช่วยให้คุณสามารถกำหนดแถวและคอลัมน์ สร้างโครงสร้างที่แข็งแกร่งและยืดหยุ่น

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav nav nav"
    "sidebar main main"
    "footer footer footer";
  gap: 10px;
  height: 100vh; /* ตรวจสอบให้แน่ใจว่ากริดครอบคลุมความสูงของ viewport */
}

.header { grid-area: header; background-color: #eee; padding: 1em; }
.nav { grid-area: nav; background-color: #ddd; padding: 1em;}
.main { grid-area: main; background-color: #ccc; padding: 1em; }
.sidebar { grid-area: sidebar; background-color: #bbb; padding: 1em; }
.footer { grid-area: footer; background-color: #aaa; padding: 1em; }

/* การปรับปรุงเพื่อรองรับ responsive */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* เลย์เอาต์แบบคอลัมน์เดียว */
    grid-template-rows: auto auto 1fr auto auto; /* เพิ่มแถวสำหรับ sidebar */
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
  }
}

ตัวอย่างนี้ใช้ grid-template-areas เพื่อกำหนดเลย์เอาต์ ทำให้โค้ดอ่านง่ายและบำรุงรักษาง่าย Media queries สามารถจัดเรียงเลย์เอาต์ใหม่สำหรับขนาดหน้าจอที่แตกต่างกันได้อย่างง่ายดาย

ฟอร์มที่ซับซ้อน

เมื่อออกแบบฟอร์มที่ซับซ้อนซึ่งมีช่องป้อนข้อมูล ป้ายกำกับ และข้อความแสดงข้อผิดพลาดหลายรายการ CSS Grid สามารถช่วยคุณจัดโครงสร้างฟอร์มอย่างมีเหตุผลและรักษาการจัดตำแหน่งที่สม่ำเสมอได้ มีประโยชน์อย่างยิ่งเมื่อคุณต้องการจัดตำแหน่งองค์ประกอบต่างๆ ในหลายแถวและคอลัมน์

<form class="grid-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">Submit</button>
</form>

.grid-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 1rem;
}

.grid-form label {
  text-align: right;
}

.grid-form button {
  grid-column: span 2; /* ขยายคร่อมทั้งสองคอลัมน์ */
  text-align: center;
}

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

เลย์เอาต์แกลเลอรี

การสร้างแกลเลอรีรูปภาพที่ไดนามิกและสวยงามเป็นอีกหนึ่งการประยุกต์ใช้ CSS Grid ที่ยอดเยี่ยม คุณสามารถควบคุมขนาดและการวางตำแหน่งของรูปภาพได้อย่างง่ายดาย สร้างประสบการณ์ที่น่าดึงดูดสายตา

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}

คุณสมบัติ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); สร้างแกลเลอรีที่ตอบสนองซึ่งจะปรับจำนวนคอลัมน์โดยอัตโนมัติตามขนาดของหน้าจอ

เมื่อใดควรใช้ Flexbox: คู่มือฉบับย่อ

• เลย์เอาต์แบบหนึ่งมิติ: การจัดเรียงไอเท็มในแถวหรือคอลัมน์
• การจัดตำแหน่งและการกระจายเนื้อหา: การกระจายพื้นที่อย่างเท่าเทียมกันระหว่างไอเท็ม
• คอลัมน์ความสูงเท่ากัน: การสร้างคอลัมน์ที่ปรับความสูงให้เท่ากันโดยอัตโนมัติ
• เลย์เอาต์คอมโพเนนต์อย่างง่าย: การจัดโครงสร้างเนื้อหาภายในคอมโพเนนต์ขนาดเล็ก เช่น การ์ดหรือกลุ่มปุ่ม
• การจัดองค์ประกอบให้อยู่กึ่งกลาง: การจัดองค์ประกอบให้อยู่กึ่งกลางทั้งแนวนอนและแนวตั้งได้อย่างง่ายดาย

เมื่อใดควรใช้ CSS Grid: คู่มือฉบับย่อ

• เลย์เอาต์แบบสองมิติ: การสร้างเลย์เอาต์ที่ซับซ้อนด้วยแถวและคอลัมน์
• โครงสร้างเว็บไซต์: การกำหนดเลย์เอาต์โดยรวมของเว็บไซต์ (ส่วนหัว, ส่วนท้าย, แถบด้านข้าง, เนื้อหา)
• ฟอร์มที่ซับซ้อน: การจัดโครงสร้างฟอร์มที่มีฟิลด์และป้ายกำกับหลายรายการ
• เลย์เอาต์แกลเลอรี: การสร้างแกลเลอรีรูปภาพที่ไดนามิกและตอบสนอง
• องค์ประกอบที่ซ้อนทับกัน: การวางตำแหน่งองค์ประกอบให้ซ้อนทับกัน

การผสมผสาน Flexbox และ Grid: การผสมผสานที่ทรงพลัง

พลังที่แท้จริงอยู่ที่การผสมผสาน Flexbox และ Grid เข้าด้วยกัน คุณสามารถใช้ Grid เพื่อจัดโครงสร้างเลย์เอาต์โดยรวมของหน้า แล้วใช้ Flexbox เพื่อจัดการเลย์เอาต์ขององค์ประกอบภายในพื้นที่กริดที่เฉพาะเจาะจง แนวทางนี้ช่วยให้คุณใช้ประโยชน์จากจุดแข็งของทั้งสองวิธี สร้างดีไซน์ที่ยืดหยุ่นและบำรุงรักษาง่ายอย่างยิ่ง คิดว่าเป็นการใช้ Grid สำหรับ 'ภาพรวม' และ Flexbox สำหรับ 'รายละเอียด' ภายในภาพนั้น

ตัวอย่างเช่น คุณอาจใช้ Grid เพื่อสร้างเลย์เอาต์พื้นฐานของเว็บไซต์ (ส่วนหัว, การนำทาง, เนื้อหาหลัก, แถบด้านข้าง, ส่วนท้าย) จากนั้น ภายในพื้นที่เนื้อหาหลัก คุณสามารถใช้ Flexbox เพื่อจัดเรียงชุดของการ์ดหรือจัดตำแหน่งองค์ประกอบภายในฟอร์มได้

ข้อควรพิจารณาด้านการเข้าถึง (Accessibility)

เมื่อใช้ Flexbox และ Grid สิ่งสำคัญคือต้องคำนึงถึงการเข้าถึง ตรวจสอบให้แน่ใจว่าเลย์เอาต์ของคุณมีความหมายตามหลัก semantic และลำดับขององค์ประกอบในซอร์สโค้ด HTML นั้นสมเหตุสมผลแม้ว่าลำดับที่มองเห็นจะแตกต่างกัน ใช้แอตทริบิวต์ ARIA เพื่อให้บริบทและข้อมูลเพิ่มเติมแก่เทคโนโลยีสิ่งอำนวยความสะดวก

• ลำดับซอร์สโค้ดที่เป็นตรรกะ: รักษลำดับซอร์สโค้ดที่เป็นตรรกะใน HTML ของคุณ
• แอตทริบิวต์ ARIA: ใช้แอตทริบิวต์ ARIA เพื่อให้ข้อมูลเพิ่มเติมแก่เทคโนโลยีสิ่งอำนวยความสะดวก
• การนำทางด้วยคีย์บอร์ด: ตรวจสอบให้แน่ใจว่าเลย์เอาต์ของคุณสามารถนำทางได้โดยใช้คีย์บอร์ด
• Semantic HTML: ใช้องค์ประกอบ HTML เชิงความหมาย (เช่น <nav>, <article>, <aside>) เพื่อให้โครงสร้างและความหมายแก่เนื้อหาของคุณ

ข้อควรพิจารณาด้านประสิทธิภาพ

ทั้ง Flexbox และ Grid เป็นวิธีการจัดเลย์เอาต์ที่มีประสิทธิภาพ อย่างไรก็ตาม สิ่งสำคัญคือต้องปรับปรุงโค้ดของคุณเพื่อหลีกเลี่ยงปัญหาคอขวดด้านประสิทธิภาพ ลดการซ้อนที่ไม่จำเป็น หลีกเลี่ยงการคำนวณที่ซับซ้อน และทดสอบเลย์เอาต์ของคุณบนอุปกรณ์ต่างๆ เพื่อให้แน่ใจว่ามีประสิทธิภาพสูงสุด

• ลดการซ้อน: หลีกเลี่ยงการซ้อนคอนเทนเนอร์ Flexbox หรือ Grid มากเกินไป
• หลีกเลี่ยงการคำนวณที่ซับซ้อน: ทำให้เลย์เอาต์ของคุณเรียบง่ายเพื่อลดปริมาณการคำนวณที่เบราว์เซอร์ต้องทำ
• ทดสอบบนอุปกรณ์ต่างๆ: ทดสอบเลย์เอาต์ของคุณบนอุปกรณ์และขนาดหน้าจอที่หลากหลายเพื่อให้แน่ใจว่ามีประสิทธิภาพสูงสุด
• ใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์: ใช้ประโยชน์จากเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์เพื่อระบุและแก้ไขปัญหาด้านประสิทธิภาพ

ความเข้ากันได้ของเบราว์เซอร์

Flexbox และ Grid ได้รับการสนับสนุนอย่างดีเยี่ยมจากเบราว์เซอร์สมัยใหม่ อย่างไรก็ตาม ควรตรวจสอบตารางความเข้ากันได้เสมอ (เช่น บนเว็บไซต์ Can I use...) และเตรียมโซลูชันสำรองสำหรับเบราว์เซอร์รุ่นเก่าหากจำเป็น ลองพิจารณาใช้ Autoprefixer เพื่อเพิ่ม vendor prefixes โดยอัตโนมัติเพื่อความเข้ากันได้ที่กว้างขึ้น

ตัวอย่างการใช้งานจริงจากทั่วโลก

นี่คือตัวอย่างบางส่วนของการใช้ Flexbox และ Grid ในเว็บไซต์และแอปพลิเคชันจริง โดยดึงมาจากภูมิภาคต่างๆ:

• อีคอมเมิร์ซ (ทั่วโลก): รายการสินค้ามักใช้ Flexbox ในการจัดตำแหน่งรูปภาพสินค้า คำอธิบาย และราคาภายในแต่ละรายการ ส่วน Grid สามารถใช้เพื่อจัดเรียงแคตตาล็อกสินค้าทั้งหมดเป็นแถวและคอลัมน์
• เว็บไซต์ข่าว (ภูมิภาคต่างๆ): เว็บไซต์ข่าวมักใช้ Grid เพื่อสร้างเลย์เอาต์ที่ซับซ้อนซึ่งมีหลายคอลัมน์ แถบด้านข้าง และบทความเด่น Flexbox สามารถใช้ภายในแต่ละส่วนเพื่อจัดตำแหน่งหัวข้อข่าว รูปภาพ และบทสรุปของบทความ
• แพลตฟอร์มโซเชียลมีเดีย (ทั่วโลก): แพลตฟอร์มโซเชียลมีเดียใช้ Flexbox อย่างกว้างขวางในการจัดตำแหน่งข้อมูลโปรไฟล์ โพสต์ และความคิดเห็น ส่วน Grid สามารถใช้เพื่อจัดโครงสร้างส่วนติดต่อผู้ใช้โดยรวม รวมถึงฟีดข่าว หน้าโปรไฟล์ และแผงการตั้งค่า
• เว็บไซต์ของรัฐบาล (ตัวอย่างในยุโรป, เอเชีย): เว็บไซต์ของรัฐบาลหลายแห่งกำลังนำ Grid มาใช้สำหรับเลย์เอาต์ของตน เพื่อให้แน่ใจว่าข้อมูลมีการจัดระเบียบอย่างดีและเข้าถึงได้ในอุปกรณ์ต่างๆ Flexbox ช่วยจัดตำแหน่งไอเท็มภายในคอมโพเนนต์ เช่น แถบค้นหาและเมนูนำทาง
• แพลตฟอร์มการศึกษา (ตัวอย่างในอเมริกาเหนือ, อเมริกาใต้): แพลตฟอร์มการเรียนรู้ออนไลน์ใช้ Grid ในการจัดระเบียบเนื้อหาหลักสูตร การบ้าน และโปรไฟล์นักเรียน Flexbox ช่วยในการสร้างส่วนติดต่อผู้ใช้ที่เป็นมิตรสำหรับแบบทดสอบ ฟอรัม และองค์ประกอบเชิงโต้ตอบ

สรุป: การเลือกเครื่องมือที่เหมาะสม

Flexbox และ CSS Grid เป็นเครื่องมือจัดเลย์เอาต์ที่ทรงพลังซึ่งสามารถปรับปรุงขั้นตอนการพัฒนาเว็บของคุณได้อย่างมาก การทำความเข้าใจจุดแข็งและจุดอ่อนของแต่ละเครื่องมือจะช่วยให้คุณสามารถเลือกเครื่องมือที่เหมาะสมกับงานและสร้างดีไซน์เว็บที่ตอบสนอง ไดนามิก และเข้าถึงได้ง่าย โปรดจำไว้ว่าแนวทางที่ดีที่สุดมักเกี่ยวข้องกับการผสมผสานทั้งสองวิธีเพื่อให้ได้ผลลัพธ์ที่ต้องการ ลองทดลอง สำรวจ และฝึกฝนเครื่องมือเหล่านี้ให้เชี่ยวชาญเพื่อปลดล็อกศักยภาพสูงสุดของคุณในฐานะนักพัฒนา front-end

ท้ายที่สุดแล้ว การเลือกระหว่าง Flexbox และ Grid ขึ้นอยู่กับข้อกำหนดเฉพาะของโครงการของคุณ พิจารณามิติของเลย์เอาต์ ระดับการควบคุมที่คุณต้องการ และข้อควรพิจารณาด้านการเข้าถึง ด้วยการฝึกฝนและการทดลอง คุณจะพัฒนาความรู้สึกที่เฉียบแหลมในการตัดสินใจว่าจะใช้วิธีใดและจะผสมผสานมันอย่างมีประสิทธิภาพได้อย่างไร

แหล่งข้อมูลเพื่อการเรียนรู้เพิ่มเติม

• MDN Web Docs: Mozilla Developer Network มีเอกสารประกอบที่ครอบคลุมเกี่ยวกับ Flexbox และ Grid
• CSS-Tricks: CSS-Tricks นำเสนอบทความ บทช่วยสอน และตัวอย่างมากมายเกี่ยวกับเทคนิคการจัดเลย์เอาต์ CSS
• Grid by Example: Grid by Example นำเสนอตัวอย่างการใช้งานจริงของเลย์เอาต์ CSS Grid
• Flexbox Froggy & Grid Garden: เกมแบบโต้ตอบเพื่อเรียนรู้พื้นฐานของ Flexbox และ Grid