在 CSS 中建立 3x3 網格的方式，是在一個父元素上同時設定 grid-template-columns 與 grid-template-rows 為 repeat(3, 1fr)，並將該父元素設為 display: grid，然後在其中放入九個子項目。簡寫的 repeat(3, 1fr) 會告訴瀏覽器繪製三個等寬的欄與三個等高的列，每個直接子元素會自動流入下一個可用的儲存格。若要控制儲存格之間的間距，可以加入 gap 值；若要控制每個項目在其儲存格內的對齊方式，則可使用 justify-items 與 align-items。最精簡的完整宣告如下：.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; }，並在 <div class="grid"> 內放入九個子元素。

3x3 版面之所以如此常見，是因為它是在頁面上仍能維持平衡感的最小二維網格之一。2x2 版面是一個象限，4x4 開始看起來像控制面板，而 3x3 則恰到好處，適用於圖片畫廊、功能矩陣、儀表板磚塊、井字遊戲棋盤、價格摘要畫面以及引導畫面。CSS Grid 是處理這類工作的理想選擇——它能在兩個軸向上同時運作，這是 Flexbox 做不到的（Flexbox 只能處理單一軸向）。CSS Grid 規範由 W3C 維護，並受到所有現行瀏覽器的完整支援，因此你今天撰寫的宣告在多年後仍會正確呈現。

how to make 3x3 grid css
how to make 3x3 grid css

開始之前你需要準備什麼

你只需要準備三項東西：一個 HTML 檔案、一個 CSS 檔案（或一個 <style> 區塊），以及一個在瀏覽器中測試結果的方法。HTML 應包含一個父容器與九個子元素，因為 3x3 網格共有九個儲存格。父元素需要有一個可在 CSS 中定位的 class 或 id，而子元素可以是 <div>、<button>、<img>，或任何其他以區塊層級方式呈現的元素。

你不需要任何建置工具、框架或 JavaScript。CSS Grid 是原生 CSS 的一部分，這表示不論你是在靜態 HTML 檔案、React 元件、Vue 範本，還是 WordPress 主題中工作，都適用相同的規則。各框架之間唯一不同的是標記的產生方式，而非網格的定義方式。

選擇正確的欄與列值

若要建立真正的 3x3 網格，兩個軸向都必須重複三次。最常用的單位是 1fr，其意義為「可用空間中的一份比例」。三個 1fr 的欄會將容器的寬度切割成三等份，三個 1fr 的列則會以相同方式切割容器的高度。如果你希望使用固定寬度的欄，也可以改用 repeat(3, 200px)，或是以 repeat(2, 1fr) 200px 混合單位來建立不對稱的版面。

模式結果常見使用情境
repeat(3, 1fr)三個等寬且具有彈性的欄與列磚塊、畫廊、儀表板
repeat(3, 200px)三個固定 200 px 的欄與列圖示網格、按鈕面板
repeat(3, minmax(120px, 1fr))三個絕不會縮窄至 120 px 以下的欄響應式卡片網格
repeat(3, auto)依內容大小調整欄寬寬度不一的標籤或縮圖

minmax() 模式值得了解，因為它能讓你的網格在窄螢幕上仍保持可讀性，且無需使用媒體查詢。每個欄會成長以填滿空間，但絕不會塌陷到 120 px 以下，因此即使在手機上，你的九個磚塊仍會清楚可見。

控制間距、對齊與項目行為

gap 屬性（前身為 grid-gap）用來設定儲存格之間的溝槽距離。設為 0 會呈現緊貼無縫的磚塊外觀，8px 或 10px 看起來是乾淨現代的卡片網格，而 20px 以上則開始像是各自獨立的面板。你也可以使用兩個值——gap: 10px 20px——分別設定列間距與欄間距。

在對齊方面，3x3 網格中需要注意四個屬性：justify-items、align-items、justify-content 以及 align-content。前兩個控制項目在其自身儲存格內的對齊方式；後兩個則控制整個網格在容器內的對齊方式。對於一般的 3x3 磚塊版面，建議使用 justify-items: stretch 與 align-items: stretch，讓每個子元素填滿其儲存格，然後在子元素本身加上內邊距。若希望內容置中於每個儲存格中，則將兩者都改為 center。

你也可以使用 grid-column 與 grid-row 簡寫來放置特定的項目，當某個磚塊應跨越多個儲存格時（例如一個涵蓋第一列前兩欄的英雄區塊），這項功能特別有用。

使用 CSS Grid Generator 建立 3x3 網格

  1. 在瀏覽器中開啟 CSS Grid Generator。
  2. 輸入欄數 3 與列數 3。該產生器在每個軸向上接受 1 到 12 之間的任何整數。
  3. 設定一個介於 0 與 100 像素之間的間距值——10 px 是大多數版面的安全起點。
  4. 挑選一個 justify-items 值（stretch、start、center 或 end），以及一個擁有相同選項的 align-items 值。
  5. 持續可見的即時預覽會隨著每次變更而更新，讓你能確認儲存格如你所願地對齊。
  6. 點擊產生或複製按鈕來複製已通過驗證的 .grid 規則。若剪貼簿權限遭封鎖，請用游標手動選取輸出內容，然後按下 Ctrl+C 或 Cmd+C。
  7. 將宣告貼到你的樣式表中，並將 class grid 加入你的容器元素。在其中放入九個子元素，你就擁有了一個可運作的 3x3 版面。

產生的規則是基於標準的，這代表它遵循由 W3C 發布的 CSS Grid Level 1 規範。你不需要為任何現行瀏覽器加上廠商前綴，且該宣告在 Chrome、Firefox、Safari 與 Edge 中皆可不經修改地正常運作。

手寫 CSS

如果你想跳過工具而自行撰寫規則，以下是可以直接放入樣式表的完整範例：

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; justify-items: stretch; align-items: stretch; } .grid > * { background: #f3f4f6; padding: 16px; border-radius: 6px; }

請將其與以下 HTML 搭配使用：

<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>

每個編號的儲存格都會填滿其位置，間距會產生可見的呼吸空間，而圓角背景磚塊則會為你提供清楚的視覺確認，證明網格運作正常。

你可以嘗試的常見變化

一旦你的基本 3x3 網格能順利呈現，幾個小調整就能開啟許多全新的版面。加入 grid-auto-flow: dense 可讓瀏覽器將較小的項目回填至較大項目留下的空隙中，這對於瀑布流風格的畫廊相當實用。將欄位改為 repeat(3, minmax(0, 1fr)) 可避免過寬的內容迫使網格溢位。而在每個子元素上設定 aspect-ratio: 1 則能為你提供完美的正方形磚塊，適用於照片網格與圖示板。

若需要更進階的版面，Flexbox Generator 可處理一維版面，而 PX to REM Converter 則能協助你將間距與內邊距值轉換為可縮放的 rem 單位。若你需要為元件所使用的 JSON 設定檔進行格式化，JSON Formatter 能在你調整設定的同時，保持資料檔案的可讀性。

排解 3x3 網格顯示異常的問題

如果你的網格只顯示一列，最常見的原因是缺少 grid-template-rows——少了它，瀏覽器仍會建立列，但會塌縮以適應內容，而非填滿容器高度。請為父元素設定一個明確的高度（height: 100vh 或固定的像素值），或改用 grid-auto-rows: 1fr。

若項目溢出了其儲存格，請檢查子元素是否設定了 min-width: 0，因為過長且不中斷的文字或圖片會將欄位撐得比其應佔的比例更寬。若最後一列與容器底部之間的間距看起來不均勻，請為底部內邊距加入相同的間距值，或移除父元素上的任何 margin。

最後，如果你正在除錯一個表現不如預期的樣式表，Diff Checker 能快速顯示出運作正常的版本與損壞版本之間的差異，而這通常是最快找出遺漏的分號或屬性名稱拼字錯誤的方法。

為何 CSS Grid 在 3x3 版面上勝過舊式版面方法

在 CSS Grid 推出之前，3x3 版面通常意味著將九個 div 浮動（float），再用一個外層容器清除浮動（clear），並手動計算寬度以預留 margin 空間。一旦你更改欄數或加入內邊距，這種方法就會立刻失效。CSS Grid 以一條宣告式規則取代了所有這些算術運算，而瀏覽器會為你完成計算工作。Flexbox 可以透過堆疊 flex 容器來模擬網格，但它會增加巢狀元素，且永遠無法提供真正的雙軸控制。具體就 3x3 而言——以及任何 12x12 以下的有限網格——CSS Grid 都是最短、最清晰且最易於維護的解決方案。

更多相關主題：如何檢查你的 JSON 格式是否正確。

如果你正在權衡各種選項，如何在 CMD 中建立目錄樹：實用操作指南對此有詳細介紹。

如果你正在權衡各種選項，使用即時產生器在數分鐘內建立 CSS 網格對此有詳細介紹。