本教學面向具有中級 HTML/CSS 基礎的前端開發者,假定你已熟悉基本的 CSS 選擇器操作並了解語意化標籤的用處。我們將從零開始,使用 純 CSS Grid(無須任何框架或工具庫)實作一個典型的響應式頁面佈局範例。在這過程中,你將學習如何:
建立 Grid 容器並定義網格列與欄,理解 Grid 容器與項目間的行為關係。
運用 語意化的 HTML 結構 劃分頁面區塊,使版面配置更語義清晰。
應用 響應式設計 原則,透過 CSS 中的媒體查詢斷點改變網格配置(例如在不同螢幕寬度下切換 grid-template-areas 佈局)。
善用 Grid 的彈性功能,如 auto-fit／auto-fill 關鍵字與 minmax() 函數,打造不需大量媒體查詢也能自適應的格線排列。
文章將以引導式教學方式逐步展示完整範例的構建,並在最後提供可直接複製的 HTML + CSS 程式碼。過程中我們也會分享最佳實踐、提醒常見錯誤,並附上一個 Q&A 單元解答初學者常見的疑問。現在,讓我們開始探索 CSS Grid 與語意化標籤結合的版面設計威力!
核心概念
在動手實作之前,我們需要先釐清幾個核心概念:CSS Grid 佈局的基本原理,以及語意化 HTML 標籤在頁面結構中的角色。
CSS Grid 佈局基礎
CSS Grid 是一種強大的二維網格版面技術。我們可以將父容器定義為 Grid 容器,然後透過設定列與欄,將容器區域劃分成許多網格格線(grid lines)所圍成的單元格(cell)。容器的直接子元素即為 Grid 項目,可以按照我們指定的位置填入這些單元格中。
與 Flexbox(單一軸線的一維佈局)不同,Grid 可同時處理行與列的排列,讓複雜布局更為直觀。簡單而言:
Grid 容器: 設置 display: grid 的元素,負責定義版面的行數、列數、間距等。容器上可以使用屬性如 grid-template-columns、grid-template-rows 來明確指定每一列列寬和每一行行高,或利用 grid-template-areas 來以區塊名稱定義佈局版圖。
Grid 項目: 容器的直系子元素,自動放入網格布局中。每個項目都可以透過屬性如 grid-column、grid-row 或 grid-area 來指定其在網格中的位置和跨越範圍。若未特別指定位置,Grid 會按照源代碼順序自動排列項目(稱為隱式佈局)。需注意的是,只有容器的直接子元素會被視為 Grid 項目,孫子元素不直接受 Grid 排版影響。
Tracks(軌道) 是指網格的列和行。我們可以將容器劃分成多列多行,每條水平線劃分出一行,垂直線劃分出一列。列與行交叉形成的區域就是單元格。開發時可用 grid-template-columns 與 grid-template-rows 定義顯式網格的欄寬和列高。例如:
以上設定建立了一個兩行兩列的網格:第一列寬度為容器寬度的 1/4,第二列為 3/4(使用 fr 彈性比例單位);行高則交由內容自適應決定,網格間有適度間距。彈性單位 fr 會根據剩餘空間按比例分配,非常適合響應式設計,比硬性 px 寬度更具彈性。此外,我們也常搭配 minmax(min, max) 函數,設定每個軌道的最小和最大尺寸,打造更智能的自適應布局。
Grid 排版有兩種基本方式:使用顯式網格或隱式網格。顯式網格指開發者明確定義每一行每一列(以及網格區域名稱),布局走向可預期且精確,適合固定結構的版型(如主要頁面框架)。隱式網格則是容器未完全定義所有行列時,由瀏覽器根據內容自動增加需要的行列。隱式網格在動態或未知內容數量時很有用,但其行列尺寸可透過 grid-auto-rows、grid-auto-columns 等屬性稍加控制。本範例的主要框架會採用顯式網格定義,以方便我們在不同斷點重新排列布局;而在展示重複項目的區塊時,則會運用 Grid 的自動填充特性(如 auto-fit)結合 minmax() 來實現隱式擴展。
另一個強大的特性是 網格範圍命名:使用 grid-template-areas 可以直觀地描述版面各區塊的排列方式。我們可以給每個區域起一個名稱,再將這些名稱排成網格布局圖,在程式碼中就能一目了然地看到版面架構。例如:
上例描述了一個三欄三列的佈局:第一行是 header 跨三欄,第二行依次為 nav、main、sidebar 三個區域,第三行是 footer 跨三欄。定義好區域後,接下來只要將容器子元素指定到相應的 grid-area 名稱即可。值得注意的是,區域名稱需要在任何媒體查詢之外先行宣告,也就是我們必須在基礎樣式中就為每個 Grid 項目設定 grid-area 名稱(即使在手機版佈局未用到多欄位),以確保後續在不同斷點更改 grid-template-areas 時瀏覽器認識這些名稱。
語意化 HTML 結構
語意化標籤是指具有語義意涵的 HTML5 元素,如 <header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 等。使用這些標籤替代大量無意義的 <div>,有助於提升程式碼可讀性和結構清晰度,並對 SEO 與無障礙(Accessibility)有正面影響。例如:
<header> 通常代表網頁的頁首區域,通常包含網站標題或導覽元素。
<nav> 表示主要導航菜單區塊,一組連結列表。
<main> 標示頁面的主要內容主體(一個頁面僅應有一個 <main>)。
<section> 一般語意區段,用於將內容按主題分塊。
<article> 表示獨立成篇的文章或帖子,可獨立理解或重用。
<aside> 常用於側邊欄或附屬資訊,例如相關連結、廣告等,和主要內容相關性較低。
<footer> 則代表頁腳區域,通常放版權資訊、聯絡方式等。
在本範例中,我們將運用部分語意標籤來構建 HTML 結構,例如以 <header> 承載頂部欄位、<nav> 呈現導航菜單、<main> 放主要內容、<aside> 作側邊補充資訊,以及 <footer> 作頁面底部。需要強調的是,語意化標籤並不會影響 CSS Grid 的排版效果——從 Grid 佈局角度看,它們與一般的 <div> 並無二致。然而,語意標籤能讓結構含義更加明確。例如,一看到 <nav> 區塊,開發者就知道這部分是導航,不需要額外註釋說明。因此,在佈局時整合語意化結構能帶來更好的開發體驗與維護性。
當然,語意化標籤應當合理使用,而非機械地「每個區塊都硬塞一種標籤」。如果找不到適切的語意標籤,使用 <div> 也是可以的。本教學將示範如何在適當的地方使用這些標籤,使我們的版面結構既語義清晰又不流於空洞形式。
理解了以上概念後,我們就準備開始實作了。下一節將帶你一步步建立一個具備響應式特性的網頁佈局範例。
實作教學
我們將實作一個簡化的網頁範本,包含頁首導覽列、主內容區、側邊欄和頁尾。此範例採行動優先(mobile-first)設計:在手機尺寸時版面為單欄,中等螢幕時變為雙欄,大螢幕時擴展為三欄。隨著螢幕寬度增加,我們會重新定義 Grid 的佈局,使更多區塊並排呈現。同時,整個過程只使用純 CSS,沒有任何 JS 或框架,完全依賴 CSS Grid 的威力。
1. 撰寫 HTML 結構
首先建立 HTML 架構。我們使用語意化標籤將頁面分為幾個主要區域:<header> 頁首區域、<nav> 導覽列、<main> 主內容、<aside> 側欄(次要內容)以及 <footer> 頁尾區域。以下是 HTML 範例:
關於這份結構:你可以看到程式碼中沒有大量的 <div>,取而代之的是富含語義的元素。頁首的 <header> 可包含網站標題或橫幅(此處為簡化,我們僅放了一段文字說明);<nav> 裡是一個清單 <ul>,模擬三個導覽按鈕連結;<main> 內有一個主標題 <h1> 及一個段落 <p>,代表主要的文章內容;<aside> 有自己的次標題 <h2>,內容為側邊附屬資訊;最後的 <footer> 作為頁面的結尾部分。這些元素在HTML 結構上已大致呈現頁面的邏輯區塊。
特別注意:上述 HTML 實現了我們預期的源順序(Source Order)。也就是說,在程式碼中內容的順序為「標頭 -> 導覽 -> 主內容 -> 側欄 -> 頁尾」。這個順序對於小螢幕(直覺上就是從上到下瀏覽)已經很合理了,同時也對SEO與無障礙有利——例如使用螢幕閱讀器時,會先讀出頁首和導覽,再進入主內容,最後附帶側欄和頁尾。良好的 DOM 結構是響應式佈局的基石:我們將利用 CSS Grid 改變它們在大螢幕上的呈現位置,但不會改變 HTML 中的元素先後關係。這確保無論視覺布局如何變換,程式碼語義順序仍然邏輯通順。
2. 基礎樣式(Mobile First)
接下來撰寫 CSS,先定義行動裝置優先的基礎樣式。由於預設我們從手機單欄布局開始,所以 初始的 Grid 配置是一個欄一列的版面。稍後再透過媒體查詢加入平板、桌機斷點的樣式。
在 CSS 中,我們要做幾件事:
將 <body> 或一個容器元素設為 Grid 容器 (display: grid)。本例我們直接讓 <body> 當容器或使用一個外層容器 <div class="wrapper"> 都可以。為簡化,此處我們直接選擇 body 作為 Grid 容器。
定義 Grid 容器的總寬度和排版。通常我們會給容器一個最大寬度並置中,以避免內容在超大螢幕上過度延展。這可以用 max-width 和 margin: 0 auto 來達成。
使用 grid-template-areas 描述版面區塊排列。手機單欄狀態下,每個區域都獨占一行,所以區塊名稱會垂直堆疊。
為容器內的每個區塊元素指定對應的 grid-area 名稱,這要與 grid-template-areas 定義的名稱一致。如此 Grid 就能將元素放入指定區域。
一些重置與美化:例如全域應用 * { box-sizing: border-box; } 以統一盒模型算法;去除 ul 的預設內邊距和項目符號等。
以下是行動版(小螢幕)狀態的 CSS 基礎樣式:
以上 CSS 做了大量設定,讓我們逐一解讀:
重置與容器: * { box-sizing: border-box; } 確保元素的寬高計算包含內邊距和邊框,方便響應式計算;body 被設為 Grid 容器並限制最大寬度 1024px(可依需求調整),用 margin: 0 auto 讓頁面內容置中。這意味著在大螢幕上內容不會太分散,而在小螢幕上 max-width 不會生效但 margin: auto 也不會有副作用。
單欄佈局: grid-template-columns: 1fr 表示只有一欄,寬度自適應佔滿整個容器。grid-template-areas 將五個區域(header、nav、main、aside、footer)依序排成五行,每行只佔一欄。這在手機上看起來就是典型的垂直滾動頁面:從頂部標頭→導覽→主內容→側欄→頁尾,一路往下。gap: 1rem 設定所有區塊間隔 1rem,避免它們緊貼在一起。
區塊對應: 我們在每個語意標籤上都設定了 grid-area,將它們分別對應到 header、nav、main、aside、footer。這樣 Grid 就知道如何將這些元素填入 grid-template-areas 定義的區域。顏色 background 僅為示意,實際應用時你會換成適合的設計風格。
導覽與對齊: 因為我們在 nav 內放了一個 ul 清單,這裡移除預設的項目符號與內邊距,讓導覽連結簡潔。文字對齊和內距也在此設定,讓各區塊內容不要太擁擠。
至此,手機版的基礎佈局已完成。接下來我們將利用媒體查詢,為更大的螢幕提供多欄式佈局。
3. 中等螢幕(平板)響應式調整
假設我們想在 600px 以上的螢幕寬度(大約對應小型平板或較大手機)採用兩欄佈局:header 和 footer 還是橫跨整行,但中間區域讓 main 和 aside 並列顯示。這樣閱讀體驗會更加舒適,且能夠更有效利用螢幕空間。實現方式是加入一個媒體查詢,在 @media (min-width: 600px) 時重新定義 grid-template-columns 和 grid-template-areas:
這段 CSS 在螢幕寬度≥600px 時生效,做了以下變更:
改為兩欄網格: grid-template-columns: 1fr 3fr 將容器分為兩欄,左欄佔1份,右欄佔3份,相當於左側約佔 1/4,右側約佔 3/4 寬度。
重排區域: grid-template-areas 設定變為四行:第一行 "header header" 讓 header 橫跨兩欄(因為 header 要滿版);第二行 "nav nav" 同理(導覽菜單在中等螢幕也還是橫向滿版);第三行 "main aside" 則讓主內容和側欄並排;第四行 "footer footer" 頁尾滿版。
如此一來,在平板上看這個頁面就會變成:頁首和導覽仍佔滿寬,中間變成左主內容+右側欄並列,底部頁尾滿版。版型從單欄變為雙欄,提升空間利用率。
需要注意的是,我們只覆寫了 body 的 grid-template-* 屬性,沒有動到其他 CSS。這正是 CSS Grid 的優勢:修改很少程式碼就能重新排版。各區塊的 grid-area 在之前已經宣告,所以瀏覽器能直接對照新的 grid-template-areas 來重新佈置元素。
4. 大型螢幕(桌機)佈局
當使用者在大螢幕桌機上瀏覽時(假設≥900px),我們可以進一步利用寬敞的視窗,改採三欄佈局。例如把導覽列移到最左側,形成經典的「左導航 + 主內容 + 側欄」三欄結構。加上以下媒體查詢:
這次我們設定三欄網格:
三欄格線: grid-template-columns: 1fr 4fr 1fr 創建左、中、右三欄,左欄與右欄較窄(各1份),中欄最寬(4份)。適合讓主內容在中央佔大部分寬度,左右留給導覽和側欄。
區域分配: grid-template-areas 改為三行三列的描述:第一行 header 橫跨三欄;第二行 nav、main、aside 三者並列(三欄剛好對應);第三行 footer 橫跨三欄。這樣版型就變成:頂部標頭→下方左邊是導覽列,中央是主內容區,右邊是側欄→底部頁尾。
如此一來,大螢幕桌機使用者看到的就是一個完整的三欄式網頁:導覽功能在左側始終可見,主文章佔據中央,側邊資訊在右側輔助,所有內容一目了然,閱讀與導航都很方便。
值得一提的是,當我們從手機單欄→平板雙欄→桌機三欄過渡時,HTML 代碼完全沒有改變,只有 CSS 在不同斷點下調整了 Grid 容器的欄數和區域排列。這就是 CSS Grid 的魅力:一套 HTML,在 CSS 層面靈活調控版面。
以上就是基本的響應式佈局實作流程。實際專案中,你還可以細部調整 gap、padding、文字大小等,讓版面更精緻。不過核心原理不變——透過 display: grid、grid-template-columns、grid-template-areas 以及媒體查詢斷點,我們就能輕鬆實現適配各種裝置的網格佈局。
進階技巧:Auto-fit 與 Auto-fill
除了顯式定義行列數,CSS Grid 還提供了更智慧的排列方式——利用 repeat() 函數搭配 auto-fit 或 auto-fill 關鍵字,讓網格自動產生適當數量的欄位,實現彈性的響應式布局。這種做法能大幅減少媒體查詢的數量,讓程式碼更簡潔且適應性更強。
當我們不確定到底需要多少欄,或希望內容數量不固定時,可使用 repeat(auto-fit, ...) 或 repeat(auto-fill, ...) 來告訴 Grid:「請依照容器寬度與項目尺寸需求,自動填入或適配欄位數量」。這兩者有細微差異:
auto-fill: 在容器寬度允許的情況下,儘可能地填滿整列。它會在網格中預留容納更多項目的欄位,即使實際項目數不足。多餘的格子如果沒有內容,仍然會保持網格軌道存在(只是空單元)。因此在用 auto-fill 時,有時會看到最後一行出現空白的「佔位格」。
auto-fit: 和 auto-fill 類似,但會自動縮合多餘的空格子。如果容器夠寬而項目不足,auto-fit 會將沒有實際項目的軌道收縮(寬度變為0),讓已存在的項目拉伸填滿可用空間。換句話說,auto-fit 更智能地「適配」內容數量,不會留空的格子。
一個簡單的例子:假設我們有一個文章卡片列表容器,要在不同裝置上自動排布卡片。可以這樣定義:
以上程式碼會讓 .cards-container 裡的子項目(例如多個 .card 元素)按網格排列,每個卡片最小寬度 200px,最大可以擴展到 1fr(也就是平均分配空間)。auto-fit 使得當容器變寬時,如果還有空間放下一個200px寬的卡片,就自動建立新的欄位放置卡片;當卡片數量不足以填滿某行時,未使用的欄位會被折疊,已有的卡片則撐開填滿剩餘空間。這樣在小螢幕可能每行只顯示1個卡片(因為容納不下第二個200px卡片),中等螢幕每行自動擠下2個或3個,大螢幕甚至更多,全程不需要寫對應斷點,畫面就能順應寬度流動。
相反地,如果把上述 auto-fit 改成 auto-fill:
效果在項目足夠填滿整行時看不出差別,但當容器出現「剩餘空間無新卡片可填」的情況時,auto-fill 仍會保持那些空欄位;它不會把空欄折疊,因此不會拉伸現有項目去佔滿剩餘空白。這種行為有時並不是我們想要的。所以,大多數情況我們更常使用 auto-fit 來得到更符合直覺的響應式行為。但了解兩者差異仍然重要,以避免誤用。
在本教學主範例中,我們的主要區塊數量是固定的(5個:header/nav/main/aside/footer),因此用不到 auto-fit/auto-fill 來增減主要區塊。但假如我們有一個區域需要呈現多個重複元素(例如 aside 區塊裡想排一組連結卡片),就可以考慮引入 auto-fit 來簡化響應式排版。我們在此透過說明讓你理解其用法,實際專案中可視需要靈活運用。總之,auto-fit/auto-fill 結合 minmax() 是 CSS Grid 構建流體格線布局的利器之一,在適合的場景下能大幅減少媒體查詢的數量。
範例展示
綜合前面所述,以下我們提供完整的 HTML 與 CSS 程式碼範例。你可以直接將這兩段代碼複製到本機檔案中(例如 grid-example.html 及對應的 grid-example.css,並在 HTML 中透過 <link> 引入 CSS),然後打開 HTML 文件在瀏覽器中查看效果。調整瀏覽器視窗大小,可以體驗從單欄→雙欄→三欄布局的響應式轉換。
HTML (grid-example.html):
CSS (grid-example.css):
將上述 HTML 和 CSS 檔案建立好後,打開網頁即可看到完整範例。初始窄視窗下,各區塊依序垂直排列;視窗寬度超過 600px 後,主內容和側欄開始並排成兩欄;超過 900px 時,導覽欄從頂部移到了左側,三欄內容並列。你可以調整瀏覽器大小或在不同裝置上預覽,體會 Grid 響應式布局 的流暢轉換。所有這些排版變化都透過幾段 CSS 設計實現,無需修改 HTML 結構,充分展現了語意化標籤配合 CSS Grid 所帶來的靈活性。
最佳實踐
在掌握了上述技巧後,我們總結一些使用 CSS Grid + 語意化標籤進行佈局的最佳實踐,以便你在未來項目中寫出更乾淨、可靠的版面程式碼:
移動優先,合理設定斷點: 採用行動優先的開發方式,先設計小螢幕佈局,再逐步利用媒體查詢在較大螢幕上調整。這可確保你的 HTML 結構按照最基礎、線性的順序編寫,有利於 SEO 和無障礙。斷點的選擇應基於內容「何時需要重新佈局」而定,而非套用固定裝置尺寸。如果使用 minmax() 和 fr 單位讓布局有一定彈性,你可能不需要很多斷點就能覆蓋各種尺寸。通常兩到三個關鍵斷點已足夠支撐常見設計(就如本例 600px、900px 兩個)。
使用彈性單位與函數: 盡量以彈性的 %、fr、minmax() 等單位定義網格軌道,而非硬編寫死的 px。這會讓佈局更能適應不同裝置。尤其 fr 單位能避免過度計算欄寬比例,minmax() 則能設定寬度上下限,讓內容在極端螢幕下也保持可讀性。另外,善用 auto-fit/auto-fill 來處理重複元素的響應式排列,減少手動媒體查詢。這些工具都能提高 CSS 的簡潔性與可維護性。
區塊命名與語意化: 利用 grid-template-areas 將版面區塊取名,可以讓 CSS 結構清晰對照 HTML 區塊。取名時建議採用易懂的語義名稱(如 "header"、"main"、"aside" 等),並盡量與實際的語意標籤相符,這樣即使協作者不熟悉你的程式碼,也能快速看懂布局意圖。HTML 部分則應盡可能使用語意標籤替代不必要的容器 <div>。不過請記住,語意標籤的首要考量是內容語義本身,不要為了版面而亂用標籤——在不恰當的地方堆砌語意標籤反而會誤導理解。
保持 DOM 與視覺順序一致: 雖然 CSS Grid 允許你以 grid-area 或 grid-column 等將元素視覺上移動到任意格子,但盡量避免和 DOM 順序嚴重不一致的佈局。這是為了確保鍵盤導航和螢幕閱讀器按照合理順序讀取內容。理想情況下,Grid 的排列轉換應該遵循「小螢幕線性順序」演化而來,這往往也是內容的語意順序。本例中,我們讓導覽在桌機上移到側欄,但因為在 DOM 中導覽原本就在主內容之前,所以無論行動版還是桌機版,閱讀順序都沒有被破壞。如果你必須改變顯示順序(例如某區塊在大螢幕想放在另一處),務必評估對使用輔助技術者的影響,並考慮使用 aria-label 等屬性提供提示。
善用 Gap 屬性: CSS Grid 提供的 gap(或分別使用 row-gap、column-gap)能方便地設定網格項目之間的間距,而不需要在每個項目上增加額外 margin。在網格布局中使用 gap 是更佳的做法,因為它不會產生多餘的空白元素,也不會像 margin 那樣在不同斷點下需要微調(例如清除最後一列 margin 等問題)。我們的範例就利用 gap: 1rem 來保持各區塊間隔一致。
逐步增強,確保相容: 儘管 CSS Grid 在現代瀏覽器中已廣泛支援,但仍需注意極少數老舊瀏覽器(如 IE11)不完整支援 Grid。如果你需要照顧這些環境,可以採取漸進增強策略:先用簡單的浮動或 flex 實現基本單欄/雙欄布局,然後用 @supports (display: grid) 包裹 Grid 的 CSS,讓支持的瀏覽器呈現更精美的 Grid 佈局,不支持的則退回簡化版本。值得慶幸的是,2025 年時大多數用戶端都已升級到支持 Grid 的瀏覽器,因此大部分專案可以放心地把 Grid 作為主要布局手段。只是別忘了以 can-i-use 查詢目標用戶的瀏覽器支持度,並在必要時加上前綴或 Polyfill(例如 Autoprefixer 處理舊版語法)。
結合其他布局方式: 最佳實踐不是只選擇單一技術。Grid 非常強大,但並不意味著 Flexbox 或其他佈局就完全淘汰了。實際上,Grid 與 Flexbox 常常相輔相成:你可以用 Grid 定義整體大版面,再用 Flexbox 排列局部元件(例如導覽列中的菜單項水平排列,或卡片內的按鈕對齊等)。選擇合適的工具處理對應的問題,會比強行用 Grid 做一切來得更清晰高效。舉例來說,本例中 <nav> ul 裡我們沒有使用 Flexbox,但如果想讓導覽連結在頂部橫向排列(比如改成橫排選單),完全可以對 nav ul 應用 display: flex; justify-content: space-around; 等輔助調整。保持彈性,才能寫出既語意正確又布局穩健的程式碼。
遵循以上這些最佳實踐,將有助於你利用 CSS Grid 打造出維護方便、適應性強的響應式版面。同時別忘了編寫清晰的註解、合理的 class 命名,這些對團隊合作開發也是至關重要的。
常見錯誤
初次嘗試 CSS Grid 進行佈局時,難免會遇到一些坑。在此我們列舉幾個常見的錯誤與迷思,希望幫助你避開這些陷阱:
忘記設置容器為 Grid: 這是新手最常見疏漏之一。如果父容器沒有 display: grid(或 inline-grid),那麼裡頭的 grid-* 設定對子元素都不會生效。所以當你發現網格佈局「不工作」時,第一時間請檢查父級元素是否正確啟用了 Grid 排版。
將 Grid 屬性用錯對象: 要區分容器屬性和項目屬性。例如 grid-template-columns、grid-template-areas 應該定義在容器上,而 grid-column、grid-row、justify-self 等定義在項目上。如果寫錯位置,瀏覽器通常不報錯但也不起作用。初學者偶爾會把 grid-area 寫在容器上,或把 grid-template-* 寫在子元素上,導致布局失敗。
濫用固定像素寬度: 在響應式設計中,只使用固定 px 大小來定義網格軌道是個常見錯誤。這會讓佈局在特定寬度下看起來剛好,但稍大或稍小就可能出現留白或擁擠。建議使用百分比或彈性單位來替代,或者至少搭配 minmax() 提供彈性範圍。當然,少量的固定寬度(例如側欄最小寬度、防止圖片壓得太小)是可以的,但應謹慎且有理由地使用。
過度依賴多重斷點: 有些人沿襲舊有 12 欄框架思維,認為每個裝置尺寸都要寫一堆媒體查詢。其實 CSS Grid 很多時候可以自適應地重排,無需那麼多斷點。過多的斷點不僅增加維護成本,也容易造成樣式衝突或者忘記同步更新。最佳做法是:利用 Grid 的彈性先覆蓋大部分情況,再針對必要的明顯斷點調整版面。前面我們示範的 auto-fit 用法就是為了減少不必要的斷點。
忽視「Grid 不等於全部」: 正如前述最佳實踐,將 Grid 視為唯一解法是個誤區。例如,若只是水平置中一個區塊,可能用簡單的 Flexbox 或甚至純文本對齊就解決了,沒有必要大材小用一個 Grid 父容器。再如,表單項目可以用 Grid 對齊,但有時簡單的 <table> 或 CSS multi-column 也許更貼切。切忌為了用新技術而用,應根據實際需求選擇工具。
未充分考慮內容高度: Grid 定義列寬行高時,常見的陷阱是在行高上。很多人設置 grid-template-rows: 1fr 1fr 1fr; 期望三行平分垂直空間,但卻忘了容器本身高度未固定,導致行高計算不如預期。另外一個情況是使用 auto 行高但內容很多時,後面的行可能跑到不可見區域。了解 auto、fr、min-content、max-content 這些值如何作用於行列尺寸,能幫助你避免高度上的版面錯亂。通常行高如非必要可讓它 auto 撐開或用 minmax() 設置下限,上限交給內容自然擴張。
忽略 gap 導致布局擁擠: 有些人沒注意到 Grid 提供 gap,而繼續在項目上用 margin 撐開距離,不僅多寫很多 CSS,也可能在末尾項目造成對齊問題。特別是多列布局,用 margin-left/right 去隔欄在響應式收縮時容易出錯。正確做法是利用 grid-row-gap 和 grid-column-gap(或統一用 gap)來維持整齊且一致的間隔。
不熟悉 auto-fit/auto-fill 差異: 使用 repeat(auto-fit, ...) 和 repeat(auto-fill, ...) 來實現彈性網格時,如果搞不清兩者差異,可能導致出現一些難解的空白格子問題。前面我們解釋過,auto-fill 會留下空軌道而 auto-fit 則會摺疊它們。如果你發現寬螢幕下最後一列內容左側有莫名空白,極可能就是用了 auto-fill 導致空格未被壓縮。這時只需改用 auto-fit 即可修正。總之,碰到問題時不要忘了檢查你使用的關鍵字是否符合預期行為。
使用舊語法或未加前綴: 早期 CSS Grid 曾有過舊版語法(例如 -ms-grid 前綴用於 IE10/11)。大多數情況這已經不需要,你應該使用標準語法。但如果真的需要支持 IE11,別忘了Grid在該瀏覽器中的限制(如不支持 grid-template-areas 等)。一般建議以工具(例如 Autoprefixer)自動補上前綴或 fallback,而不手寫前綴,避免出錯。再提一次,2025 年絕大多數情況你可以無視 IE 了,但謹慎起見要知道存在那麼回事即可。
當然,犯錯是學習過程的一部分。如果在開發 Grid 佈局時發現效果不如預期,不妨對照以上清單逐一檢查。多利用瀏覽器的開發者工具,Chrome 和 Firefox 都有 Grid 狀態的可視化顯示功能,可以幫你看見網格線、已命名區域和各項目的佔位情況。透過調試工具往往能快速定位問題所在。養成良好的除錯習慣,你將更快掌握 CSS Grid 的特性並運用自如。
問與答 (Q&A)
最後,我們整理了一些初學者在使用 CSS Grid 結合語意化標籤進行佈局時常見的疑問,在此統一解答:
Q1:CSS Grid 和 Flexbox 有什麼不同?我應該用哪一個來做布局?
A1: CSS Grid 和 Flexbox 是互補的布局工具,各有擅長領域。Grid 擅長二維布局,可以同時控制行與列,非常適合用來實現頁面的總體結構(比如多欄網站、圖片廊、多行多列的網格等)。Flexbox 則專注於一維布局(單行或單列),更適合排布導航菜單、按鈕列、表單欄位這種線性排列。一般建議:頁面的主要版型(尤其是兩欄以上的複雜布局)用 Grid 構建,而介面中較小的元件(例如水平置中一組按鈕、讓標籤 icon 與文字對齊)用 Flexbox 處理。很多情況下兩者可以嵌套使用:Grid 定義大框架,每個 Grid 項目內再用 Flexbox 微調內容。選擇哪個主要取決於你要排版的元素關係是二維還是一維——如果需要同時考慮 row 和 column,就用 Grid;只需要在一排(或一行)上排列,就用 Flex。熟練掌握兩者將使你的版面實現如虎添翼。
Q2:可以不使用語意化標籤,改用 <div> 配合 Grid 嗎?
A2: 從技術上來說,完全可以,只要適當加上 class 或 id,Grid 仍能正常運作。CSS 對元素的語意沒有偏好,<div class="header"> 和 <header> 在呈現上沒區別。但是我們強烈建議盡量使用語意標籤,原因有幾點:其一,讓 HTML 結構自帶意義,方便自己和他人閱讀理解;其二,一些語意標籤在無障礙和 SEO 方面有內建優勢(例如瀏覽器和輔助設備會自動識別 <nav> 是導航、<main> 是主要內容等);其三,語意標籤往往能減少使用不必要的 class 名稱,精簡 HTML。當然,如果版面區塊無明確語意(比如純為裝飾的容器),使用 <div> 也是合理的。總之原則是:能語意,則語意,不能則退而求其次。不過無論如何,Grid 本身不依賴語意標籤,你可以在任何元素上運用 Grid 屬性。
Q3:什麼時候應該使用 auto-fill,什麼時候使用 auto-fit?
A3: 兩者差異在前文已解釋過,簡而言之:大多數情況下首選 auto-fit,因為它能自動收縮空軌道讓現有內容撐滿列寬。而 auto-fill 的特性是在容器夠寬時依然保持那些空的格子。例如,如果你想做一排固定寬度卡片,
結論
透過本教學,我們系統地介紹了如何結合 CSS Grid 與 語意化 HTML 標籤 來打造現代化的響應式網頁佈局。從基本概念到實作範例,從進階技巧到常見錯誤,相信你已經掌握了使用 Grid 進行版面設計的核心要領。
CSS Grid 的出現大幅簡化了複雜佈局的實現,讓開發者能用更少的程式碼達成更靈活的排版效果。配合語意化標籤,不僅讓程式碼結構清晰易讀,更提升了網站的可訪問性和搜索引擎優化。
現在輪到你動手實踐了!試著將今天學到的技巧應用到你的專案中,體驗 Grid 佈局的強大威力。記住,最好的學習方式就是不斷練習和實驗。祝你在前端開發的道路上越走越順!
