商用網站架設實務

LESSON-09 · checkpoint

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

主要結構已經完成，只留下本堂一個核心缺口。先預測，再從指定檔案找出它。 這頁用 可觀察證據 和 anchor 指出下一個動作。

Starter4 個小成果
Checkpoint一個核心缺口
Solution5 個差異

開始前確認

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

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

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

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

照這個順序做

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

CHECKPOINT-1

用 390px 的實際溢位證據回到真正控制欄數的 Grid container。

目的

用 390px 的實際溢位證據回到真正控制欄數的 Grid container。

修改檔案

style.css

程式碼位置

CHECKPOINT-1：.service-grid 固定欄寬

現在要做：請在 style.css 的「CHECKPOINT-1：.service-grid 固定欄寬」位置完成：找出固定欄寬造成的水平溢位，改回 auto-fit、minmax 與 1fr

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

.service-grid {
  grid-template-columns: repeat(3, 220px);
}

預期結果：修正前 390px 有水平捲軸；修正後欄位可縮小或換列，scrollWidth 不大於 clientWidth。

驗收證據：修正前後記錄 scrollWidth、clientWidth、Computed grid-template-columns 與 Grid overlay。

卡住時先看這裡

常見錯誤：只加 overflow-x:hidden 隱藏捲軸，或只改卡片寬度而留下固定欄寬。

第一個檢查：先在 Console 比較 document.documentElement.scrollWidth 與 clientWidth，再選取 .service-grid。

階段檔案

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

開啟 checkpoint 的可執行入口

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 服務卡｜checkpoint</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">這份頁面故意保留固定欄寬；請先在約 390px 重現水平捲軸，再回到 style.css。</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>
      <div class="service-grid">
      <article class="service-card service-card--featured"><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>
  </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; }
/* CHECKPOINT-1：固定欄寬故意保留，請先在約 390px 重現水平捲軸。 */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 220px);
  gap: 1rem;
}
.service-card--featured { grid-column: 1 / -1; }

完成驗收

下一步

Checkpoint 完成後，先說出你修正的原因，再前往 Solution 對照每個檔案差異。

前往 Solution，逐檔對照差異