LESSON-09 · starter

CSS 進階：Grid 服務型商家版面骨架

你會依序完成4個本堂專屬微步驟；每一步只修改一個責任，看到結果後才進下一步。這頁用可觀察證據和 anchor 指出下一個動作。

Starter4 個小成果

Checkpoint一個核心缺口

Solution5 個差異

開始前確認

這一頁的結果：入口頁可以開啟

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Styles、Computed 與 Grid overlay狀態。

會用到的檔案：index.html、style.css

本堂焦點：用 CSS Grid 建立可伸縮的服務型商家版面

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

目的

先在 HTML 建立 Grid container 與 Grid item 的父子關係。

修改檔案

index.html

程式碼位置

service-section

現在要做：請在 index.html 的「service-section」位置完成：把四個服務項目放入同一個 service-grid 父層

貼上位置：index.html：service-section 區塊，先保留同一檔案的其他內容。

<section class="service-section" aria-labelledby="services-title">
  <h2 id="services-title">服務方案</h2>
  <div class="service-grid">
    <article class="service-card"><h3>到府諮詢</h3><p>先釐清需求。</p></article>
    <article class="service-card"><h3>定期維護</h3><p>建立服務節奏。</p></article>
    <article class="service-card"><h3>空間整理</h3><p>讓內容更清楚。</p></article>
    <article class="service-card"><h3>上線檢查</h3><p>確認頁面可用。</p></article>
  </div>
</section>

預期結果：Elements 看到一個 service-grid 與四個直接子層 service-card。

驗收證據：Elements 的 DOM 階層與 Grid overlay 的 item 數量一致。

卡住時先看這裡

常見錯誤：把 service-grid class 放到每張卡，或把卡片放在父層外。

第一個檢查：先從 Elements 選取一張卡，再往上找真正的 service-grid。

目的

先用明確的列欄規則看懂 Grid 如何排列直接子元素。

修改檔案

style.css

程式碼位置

.service-grid

現在要做：請在 style.css 的「.service-grid」位置完成：建立 Grid container 與三條等比例欄位

貼上位置：style.css：.service-grid 區塊，先保留同一檔案的其他內容。

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

預期結果：桌機畫面可看到三欄，Grid overlay 顯示欄線與服務卡位置。

驗收證據：Computed 的 display:grid、grid-template-columns 與 Grid overlay。

卡住時先看這裡

常見錯誤：把 display:grid 寫到 service-card，或用 margin 模擬欄位。

第一個檢查：先選 .service-grid，再看 Computed 的 display 與欄位值。

目的

讓欄位依可用寬度排列，並用共同規則管理卡片間距。

修改檔案

style.css

程式碼位置

.service-grid 的間距與流動欄位

現在要做：請在 style.css 的「.service-grid 的間距與流動欄位」位置完成：加入 gap，並把固定三欄改成 repeat(auto-fit, minmax(220px, 1fr))

貼上位置：style.css：.service-grid 的間距與流動欄位區塊，先保留同一檔案的其他內容。

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

預期結果：桌機有多欄；390px 會自然降成可讀的單欄，且沒有水平捲軸。

驗收證據：390px 與桌機畫面、Computed 的欄位像素值與 document 寬度比較。

卡住時先看這裡

常見錯誤：只把卡片設成 width:100%，卻保留父層固定三欄。

第一個檢查：先檢查 .service-grid 的 grid-template-columns 是否仍含固定 220px 三次。

目的

用 Grid item 的 placement 表達主卡片的視覺主位。

修改檔案

style.css

程式碼位置

.service-card--featured

現在要做：請在 style.css 的「.service-card--featured」位置完成：讓推薦服務卡從第一條 Grid line 跨到最後一條 Grid line

貼上位置：style.css：.service-card--featured 區塊，先保留同一檔案的其他內容。

.service-card--featured {
  grid-column: 1 / -1;
}

預期結果：推薦卡單獨佔滿一整列，其他卡片仍由父層自動排列。

驗收證據：Grid overlay 的起始／結束欄線，以及推薦卡的畫面位置。

卡住時先看這裡

常見錯誤：把卡片移出父層，或用負 margin 把它推到上一列。

第一個檢查：先確認推薦卡是 service-grid 的直接子元素，再讀 grid-column。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 starter 的可執行入口

開啟index.html入口 HTML：建立 service-grid 與四個 service-card 的父子結構。
開啟style.cssGrid 樣式：觀察 container、tracks、gap、流動欄位與 featured item 跨欄。

index.html入口 HTML：建立 service-grid 與四個 service-card 的父子結構。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%230f4c5c'/%3E%3C/svg%3E" type="image/svg+xml">
  <title>LESSON-09｜CSS Grid 服務卡｜starter</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="page-shell">
    <p class="eyebrow">LESSON-09 · CSS Grid</p>
    <h1>服務型網站的二維版面</h1>
    <p class="page-description">請依序完成 HTML 結構、Grid container、流動欄位與推薦卡跨欄。</p>
    <section class="intro" aria-labelledby="goal-title">
      <h2 id="goal-title">本階段觀察</h2>
      <ul>
        <li>先找出真正控制欄數的父層 .service-grid。</li>
        <li>用 Computed 與 Grid overlay 觀察 columns、tracks、lines 與 gap。</li>
        <li>約 390px 時確認卡片可讀，而且沒有水平捲軸。</li>
      </ul>
    </section>
    <section class="service-section" aria-labelledby="services-title">
      <h2 id="services-title">服務方案</h2>
      <!-- TODO-1：在這裡建立 service-section、service-grid 與四個 service-card。 -->
    </section>
  </main>
</body>
</html>

style.cssGrid 樣式：觀察 container、tracks、gap、流動欄位與 featured item 跨欄。

這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。

:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.page-shell { width: min(100% - 2rem, 760px); margin: 0 auto; padding: 2rem 0; }
.eyebrow { color: #0f766e; font-weight: 800; letter-spacing: .05em; }
.page-description { color: #52657d; }
.intro, .service-card { padding: 1rem; border: 1px solid #cbd8e4; border-radius: .75rem; background: #fff; }
.service-section { margin-top: 2rem; }
.service-card { min-width: 0; }
.service-card h3 { margin-top: 0; }
.service-card--featured { border-color: #0f766e; background: #ecfdf5; }
/* TODO-2：讓 .service-grid 成為 Grid container，先建立三條等比例欄位。 */
/* TODO-3：加入 gap，並改成 repeat(auto-fit, minmax(220px, 1fr))。 */
/* TODO-4：讓 .service-card--featured 使用 grid-column 跨滿一列。 */

完成驗收

入口頁可以開啟
4 個 TODO 都已完成
能展示 Grid overlay、欄數、gap、featured 跨欄、390px 可讀性與無水平捲軸
留下入口網址、修改檔案、操作步驟、預期結果與實際觀察。

下一步

Starter 完成後，不要直接看 Solution；先前往 Checkpoint，自己找出最後一個核心缺口。

前往 Checkpoint，自己補最後一個核心缺口