HTML และ CSS EP18: CSS Grid Layout — สร้างเลย์เอาต์เว็บไซต์แบบหลายคอลัมน์อย่างมืออาชีพ

HTML & CSS

บทเรียน EP18 เรียนรู้ CSS Grid ตั้งแต่แนวคิดแถวและคอลัมน์ การกำหนดพื้นที่ การสร้างการ์ดสินค้าแบบ Responsive การใช้ minmax(), repeat(), auto-fit และ grid-template-areas พร้อมตัวอย่าง HTML เต็มหน้าและแบบฝึกหัดที่นำไปทดลองได้ทันที

EP18 — CSS Grid Layout: วางโครงสร้างเว็บไซต์ด้วยแถวและคอลัมน์

1. CSS Grid คืออะไร และต่างจาก Flexbox อย่างไร

2. คำศัพท์พื้นฐานที่ต้องเข้าใจ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid พื้นฐาน</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background: #f1f5f9; color: #172033; }
    h1 { font-size: 1.5rem; }
    .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .item { padding: 24px 12px; text-align: center; color: #fff; background: #2563eb; border-radius: 10px; font-weight: 700; }
    .item:nth-child(even) { background: #0f766e; }
    @media (max-width: 520px) { .grid { grid-template-columns: 1fr 1fr; } }
  </style>
</head>
<body>
  <h1>ตัวอย่าง Grid 3 คอลัมน์</h1>
  <p>ทดลองปรับความกว้างหน้าต่างเพื่อดูจำนวนคอลัมน์เปลี่ยนไป</p>
  <div class="grid">
    <div class="item">รายการ 1</div>
    <div class="item">รายการ 2</div>
    <div class="item">รายการ 3</div>
    <div class="item">รายการ 4</div>
    <div class="item">รายการ 5</div>
    <div class="item">รายการ 6</div>
  </div>
</body>
</html>

3. เริ่มต้นสร้าง Grid ด้วย display: grid

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 16px;
}

/* คอลัมน์กว้างเท่ากัน 3 คอลัมน์ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* แถวที่มีความสูงอย่างน้อย 120px */
.cards {
  grid-auto-rows: minmax(120px, auto);
}

4. repeat(), minmax() และ auto-fit: หัวใจของ Responsive Grid

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.product-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.product-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}

5. จัดระยะด้วย gap และกำหนดแถว

.dashboard {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  row-gap: 16px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: 24px;
  column-gap: 16px;
}

.gallery-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

6. วางองค์ประกอบด้วย grid-column และ grid-row

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card:first-child {
    grid-column: auto;
    grid-row: auto;
  }
}

7. สร้างโครงหน้าเว็บด้วย grid-template-areas

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 16px;
}

.site-header { grid-area: header; }
.site-sidebar { grid-area: sidebar; }
.site-main { grid-area: main; }
.site-footer { grid-area: footer; }

@media (max-width: 700px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

8. จัดแนวรายการภายในกริด

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  justify-items: stretch;
  align-items: center;
}

.grid-item {
  min-width: 0;
  padding: 20px;
}

/* ทางลัดสำหรับกำหนดทั้งสองแกน */
.grid-centered {
  display: grid;
  place-items: center;
}

9. ตัวอย่างโปรเจกต์: สร้างหน้าแสดงการ์ดคอร์สแบบ Responsive

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ตัวอย่างหน้าแสดงคอร์สเรียนด้วย CSS Grid">
  <title>ศูนย์รวมคอร์สเรียน</title>
  <style>
    :root {
      color-scheme: light;
      --page-bg: #f1f5f9;
      --surface: #ffffff;
      --text: #172033;
      --muted: #526176;
      --border: #dbe3ee;
      --primary: #1d4ed8;
      --primary-hover: #1e40af;
      --badge-bg: #dbeafe;
      --badge-text: #1e40af;
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--page-bg);
      color: var(--text);
      line-height: 1.6;
    }
    .site-header {
      padding: 28px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }
    .header-inner, main, .site-footer {
      width: min(1120px, calc(100% - 32px));
      margin-inline: auto;
    }
    .header-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
    .intro { max-width: 680px; margin: 8px 0 0; color: var(--muted); }
    .theme-button {
      padding: 10px 14px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
    }
    .theme-button:focus-visible, .course-link:focus-visible {
      outline: 3px solid #f59e0b;
      outline-offset: 3px;
    }
    main { padding-block: 28px 40px; }
    .section-heading {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      gap: 12px;
      margin-bottom: 18px;
    }
    .section-heading h2 { margin: 0; font-size: 1.4rem; }
    .section-heading p { margin: 0; color: var(--muted); }
    .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
      gap: 18px;
      align-items: stretch;
    }
    .course-card {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 20px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 0 5px 18px rgb(15 23 42 / 5%);
    }
    .course-card h3 { margin: 14px 0 8px; font-size: 1.12rem; }
    .course-card p { margin: 0 0 16px; color: var(--muted); }
    .course-badge {
      align-self: flex-start;
      padding: 4px 9px;
      border-radius: 999px;
      background: var(--badge-bg);
      color: var(--badge-text);
      font-size: .8rem;
      font-weight: 700;
    }
    .course-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: .9rem;
    }
    .course-link {
      display: inline-block;
      margin-top: 16px;
      padding: 10px 14px;
      border-radius: 10px;
      background: var(--primary);
      color: #fff;
      text-align: center;
      text-decoration: none;
      font-weight: 700;
    }
    .course-link:hover { background: var(--primary-hover); }
    .site-footer { padding-block: 0 28px; color: var(--muted); font-size: .9rem; }

    html[data-theme="dark"] {
      color-scheme: dark;
      --page-bg: #0f172a;
      --surface: #1e293b;
      --text: #f1f5f9;
      --muted: #c0ccdc;
      --border: #475569;
      --primary: #2563eb;
      --primary-hover: #3b82f6;
      --badge-bg: #1e3a8a;
      --badge-text: #dbeafe;
    }

    @media (prefers-reduced-motion: no-preference) {
      .course-card { transition: transform .18s ease, box-shadow .18s ease; }
      .course-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgb(15 23 42 / 12%); }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="header-inner">
      <div>
        <h1>ศูนย์รวมคอร์สเรียน</h1>
        <p class="intro">เลือกหัวข้อที่สนใจ แล้วเรียนรู้ทักษะใหม่ได้ตามจังหวะของคุณ</p>
      </div>
      <button class="theme-button" id="themeToggle" type="button" aria-pressed="false">เปลี่ยนเป็นโหมดมืด</button>
    </div>
  </header>

  <main>
    <section aria-labelledby="coursesTitle">
      <div class="section-heading">
        <h2 id="coursesTitle">คอร์สแนะนำ</h2>
        <p>ตัวอย่างเลย์เอาต์ที่ใช้ CSS Grid</p>
      </div>
      <div class="course-grid">
        <article class="course-card">
          <span class="course-badge">เริ่มต้น</span>
          <h3>HTML สำหรับผู้เริ่มต้น</h3>
          <p>เรียนรู้โครงสร้างเอกสาร การสร้างหัวข้อ ลิงก์ รูปภาพ และแบบฟอร์มพื้นฐาน</p>
          <div class="course-meta"><span>8 บทเรียน</span><span>พื้นฐาน</span></div>
          <a class="course-link" href="#html-course">ดูรายละเอียดคอร์ส</a>
        </article>
        <article class="course-card">
          <span class="course-badge">ออกแบบ</span>
          <h3>CSS Layout และ Responsive</h3>
          <p>ฝึกจัดวางองค์ประกอบด้วย Flexbox, Grid และ Media Queries สำหรับทุกหน้าจอ</p>
          <div class="course-meta"><span>12 บทเรียน</span><span>ระดับกลาง</span></div>
          <a class="course-link" href="#css-course">ดูรายละเอียดคอร์ส</a>
        </article>
        <article class="course-card">
          <span class="course-badge">ลงมือทำ</span>
          <h3>สร้างหน้าเว็บโปรเจกต์แรก</h3>
          <p>นำความรู้มาประกอบเป็นหน้าเว็บจริง พร้อมตรวจสอบการใช้งานบนมือถือ</p>
          <div class="course-meta"><span>6 บทเรียน</span><span>โปรเจกต์</span></div>
          <a class="course-link" href="#project-course">ดูรายละเอียดคอร์ส</a>
        </article>
        <article class="course-card">
          <span class="course-badge">ต่อยอด</span>
          <h3>จัดการธีมด้วย CSS Variables</h3>
          <p>สร้างชุดสีที่ดูแลได้ง่าย และทดลองเปลี่ยนธีมสว่างหรือธีมมืด</p>
          <div class="course-meta"><span>5 บทเรียน</span><span>ระดับกลาง</span></div>
          <a class="course-link" href="#theme-course">ดูรายละเอียดคอร์ส</a>
        </article>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>ตัวอย่างเพื่อการเรียนรู้ สามารถแก้ข้อความ สี ระยะห่าง และจำนวนการ์ดได้ตามต้องการ</p>
  </footer>

  <script>
    const toggle = document.querySelector('#themeToggle');
    toggle.addEventListener('click', () => {
      const isDark = document.documentElement.dataset.theme !== 'dark';
      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
      toggle.setAttribute('aria-pressed', String(isDark));
      toggle.textContent = isDark ? 'เปลี่ยนเป็นโหมดสว่าง' : 'เปลี่ยนเป็นโหมดมืด';
    });
  </script>
</body>
</html>

10. ตรวจสอบ Responsive และการเข้าถึง

11. ปัญหาที่พบบ่อยและวิธีแก้

12. แบบฝึกหัดลงมือทำ

13. คำถามที่พบบ่อย

14. สรุปบทเรียน EP18

โปรเจกต์ท้ายบท: นำ CSS Grid ไปใช้กับเว็บไซต์ของคุณ

เริ่มทดลองสร้างเลย์เอาต์ CSS Grid