Bento Grid 網頁排版設計教學：創意版面配置

三分鐘搞懂 Bento Grid：把版面當便當盒來裝

使用者通常會先快速掃過頁面，再決定是否細看。當首頁塞了十幾個區塊、每一區都想搶注意力，畫面就會變成一條冗長的內容流。Bento Grid（便當盒排版）把內容拆成大小不一的方格，像裝日式便當一樣排進外框，讓重要訊息與次要資訊形成清楚層級。

這篇我要把這套排版邏輯一次講清楚：它為什麼有效、什麼時候反而會害到你、怎麼從零開始組一個不會垮的 Bento 版面、以及手機上要怎麼退化才不會破版。如果你正在做品牌官網、作品集、產品頁或一頁式活動頁，這套方法可以讓你在同一個螢幕裡塞進更多資訊，又不犧牲呼吸感。

重點摘述：Bento Grid 的核心其實是內容配重，格子只是外殼。先決定哪些訊息最重要、給它們比較大的格子，再把剩下的訊息填進小格裡，整個版面的視覺重心就會自動出來。它最適合「資訊多、但要同時被看見」的頁面，例如首頁、產品總覽、服務介紹、作品集。

便當盒是怎麼變成一種網頁排版的

Bento（弁當）這個詞來自日文的便當盒。傳統日式便當盒裡會用隔板把白飯、主菜、配菜、漬物分成一格一格，每道菜有自己的位置，打開盒蓋就能一次看到全部。把這個邏輯搬到網頁上，就是你看到的 Bento Grid：一個大容器裡，用直線切成大小不等的方塊，每個方塊裝一個獨立訊息。

Bento 常被用來描述產品特色或作品總覽的格狀編排；這是視覺風格名稱，不是 Apple 或 CSS 規格定義的標準。評估時應看內容是否適合並列，不能由知名品牌採用就推定對本站有效。

但這裡有個誤解要先釐清：Bento Grid 跟早期那種死板的「九宮格」「卡片牆」不是同一件事。九宮格每格一樣大，訊息沒有輕重；Bento 的關鍵是格子大小不一，讓版面自然產生節奏與視覺層級。換句話說，沒有「配重」的 Bento，就只是一堆沒有重點的方塊。

先破除三個對 Bento 排版的迷思

Bento 這兩年被講到爛，也累積了一堆以訛傳訛的誤解。我挑三個最常聽到的來拆。

迷思一：Bento 就是把所有東西都做成圓角卡片。很多人把「圓角加陰影」直接等同於 Bento，結果把整頁的段落、標題、按鈕全部包進圓角框裡，畫面變成一鍋卡片湯。真正的 Bento 重點是格狀結構帶來的視覺層級，圓角與陰影只是其中一種表現手法。你完全可以用直角、用純色塊、甚至用留白來切格，照樣是 Bento。手法是手段，格狀層級才是本質。

迷思二：Bento 一定要做成深色底。深淺配色都可以使用；可讀性取決於實際色彩對比、文字與環境，並非淺色必定更適合長文。依品牌需求選色，再驗證所有內容與操作狀態。

迷思三：Bento 一定要很多格。格數應依資訊與操作需求決定，四格或十二格都可能合適；比起填滿版面，更值得檢查主次、內容完整性及不同寬度的閱讀順序。

評估 Bento 時可以看的三個面向

以下是選版面時可檢查的條件，不把它們當成已證明的流行原因。

先看本站的裝置與任務。Google 採行動優先索引，重點是手機版的重要內容與資源可被存取；不需要用全球手機佔比來決定每個網站的佈局。

內容模組可以在窄螢幕重新配置，但不會因採用 Bento 就自動好用。需測試欄寬、內容溢出與閱讀順序，保留合理的 DOM 與焦點流程。

有些讀者會先掃描，有些任務需要逐段閱讀。卡片邊界可協助分組，卻不保證比文字頁更容易理解；可用找資訊或完成任務的測試判斷版面是否合適。

CSS Grid 與視覺編輯器提供不同實作方式。Bootstrap、Tailwind 與頁面編輯器的抽象層不相同，不能一律說內建相同卡片元件；應核對目前版本支援的佈局與控制項。

Bento Grid 跟 Masonry 差在哪：別把兩種搞混

Bento 通常強調跨列或跨欄的主從卡片；Masonry 則以不同高度的項目填補空隙。兩者不是完全相反的技術分類：Bento 可隨內容伸展，Masonry 也可以配合預設尺寸，實作方式與閱讀順序仍需另外選擇。

先看內容是否平行、是否需要比較，以及有無固定先後。商品目錄不一定只能用 Masonry，Bento 也不要求所有圖片同一比例；裁切與拉伸是不同操作，應保留主體並避免失真。

別急著套用：Bento Grid 會害到你的三種情境

Bento 不是萬用解。我在協助網站健檢時看過不少「為了 Bento 而 Bento」的悲劇，通常落在三種情境。

連續閱讀或步驟流程可先考慮單欄，平行總覽則可測試 Bento；同一頁也能混用不同區段。輪播是另一種呈現方式，不能只因內容有先後順序就自動採用，還需考慮發現、控制與可存取性。 延伸可參考Figma 輪播設計。

把 Bento 拆成三個動作：分類、配重、組裝

可以用「分類、配重、組裝」安排草稿，再測試內容和操作。這是本文提出的設計流程，不是 Bento 的正式標準，也不保證照做就得到有效版面。

動作一：分類，把頁面內容分成四種角色

打開你的頁面，把所有要放上去的訊息列出來，然後分成四種角色。這一步是整個 Bento 的地基，分類沒做好，後面怎麼排都會怪。

• 主角訊息：這個頁面最重要的那一句話或那張圖。首頁的價值主張、產品頁的主視覺、作品集的代表作品。初稿可先挑一到兩個重點，再依任務測試。
• 佐證訊息：支撐主角的細節。功能清單、數字、客戶標誌、使用者見證。它讓主角更有說服力，但不能搶戲。
• 導引訊息：要讀者採取的動作。聯絡按鈕、報名連結、瞭解更多。這類訊息要放在容易點到的位置。
• 氣氛訊息：純粹讓版面好看、有溫度的元素。裝飾性插圖、品牌色塊、留白格。它不傳遞資訊，但少了它版面會乾。

分類完你會發現，大部分的 Bento 排版災難都來自「想讓每個訊息都當主角」。當每格都想搶注意力，就等於沒有注意力。

動作二：配重，決定每個訊息吃幾格

分好角色之後，接著決定每個訊息在版面上佔多大空間。我用一個「格數」的概念來配重：假設你的版面是一個 4 欄 3 列的基礎網格，總共有 12 個單位格。主角訊息吃 4 格（2x2），佐證訊息吃 2 格（2x1 或 1x2），導引訊息吃 1 到 2 格，氣氛訊息吃 1 格或當留白。

格數預算可協助檢查固定草圖，但不用強迫內容填滿十二格。文字較長時可增加高度、調整欄數或改版面；不要為填格補無用裝飾，也不要為固定高度裁掉內容。

動作三：組裝，把訊息一格一格塞進版面

主角的位置依閱讀方向、內容順序與螢幕配置決定，左上或中央只是可能的草稿位置。CTA 應在讀者有足夠資訊時容易找到，不固定放在右下；組裝後需一起測試視覺及鍵盤流程。

組裝的時候不要追求完美對稱。很多初學者一開口就要做「完美對稱的 Bento」，結果每格都一樣大、留白也一樣多，做出來的版面反而像試算表，沒有節奏。好的 Bento 會有大小落差，讓眼睛在掃視時自然停在主角上。這就像音樂要有強弱拍才好聽，每個拍子都一樣大聲的叫節拍器，不叫音樂。

這一步如果你用視覺化工具，我會建議先在 Figma 的網格系統裡拉出灰階方塊草圖，確定配重與動線都順了，再進到實際的頁面編輯器做。在草圖階段改版面的成本最低，做到成品才發現動線不對，改起來很痛。

四種最基本的 Bento 格狀結構

組裝的時候，你會發現大部分的 Bento 版面都可以歸納成幾種基本結構。掌握這四種，你就等於有了版面的積木庫，組合變化都從這裡出發。

新手我會建議從主從型開始練。它的視覺動線最清楚，也最不容易出錯。等你能穩定做出主從型，再挑戰棋盤型與不規則型，那是進階版，需要更強的視覺判斷力。一開始就想做不規則型的 Bento，通常會做出「看起來很亂但其實沒有設計感」的版面，那是因為還沒學會規則就先想打破規則。

用 CSS Grid 實作：命名區域是一種選擇

CSS Grid 適合控制列與欄，grid-template-areas 可用名稱描述區域；也可採格線定位或自動配置。選法依內容變動與維護需求決定，沒有所有佈局通用的最乾淨寫法。

每個字串代表一列，列內名稱或句點代表欄位；同名區域必須組成矩形，且每列格數需相同，否則宣告無效。命名後仍要替子項設定相應的 grid-area。詳見命名網格區域規則。

例如四欄可以寫成 "hero hero hero hero" "feature feature cta news" "proof1 proof2 proof3 ."。三列各有四格，最後的句點表示空格。這只示範區域配置，實作仍需設定欄寬、子項的 grid-area 與窄螢幕規則，並以實際內容驗證。

grid-auto-rows 設定隱式列尺寸，aspect-ratio 提供偏好比例；比例作用也受明確寬高與內容影響，不保證文字自動容納。可搭配彈性尺寸及 gap，在長文、放大文字與窄螢幕下測試溢出。

如果你對 CSS 還不熟，這部分不用急著自己寫，先把概念理解起來就好。實務上，現在主流的 CSS 基礎教學都會涵蓋 Grid，而 Bento 用的就是 Grid 最核心的那幾個屬性。你可以把它想成是 Box Model 那套內距、邊框、外距觀念的延伸，只是從「單一元素的盒子」升級成「整個版面的盒子排列」。

為什麼我會優先用 Grid，把絕對定位或浮動放一邊？因為 Grid 能用明確的格線與斷點管理版面，比大量固定座標更容易適應不同視窗。它也有助於預留模組尺寸、降低 Core Web Vitals 裡的 CLS（累計版面位移），但仍要替圖片與動態內容設定尺寸，不能只靠 Grid 就保證版面穩定。Google 在 web.dev 的文件裡也強調，載入速度與版面穩定度會影響使用者體驗（2026 年）。

視覺編輯器也有相應工具，例如 Elementor 的Grid Container和 Divi 5 的Grid Editor。先核對目前版本、功能與響應式設定；不是所有舊版都有相同網格能力，拖拉完成後仍要驗證內容順序及前臺操作。 延伸可參考頁面編輯器、Elementor Pro、Divi 的版型。

Bento 排版的無障礙與 SEO：順序比長相更重要

Grid 可讓視覺位置與 DOM 不同，但這不只影響螢幕閱讀器，也可能讓看著畫面使用鍵盤的人遇到跳動的焦點。搜尋理解不能只簡化成從上到下讀程式碼；應先確保內容本身有合理順序。

這會帶來兩個問題。第一個是語意理解：搜尋引擎會依 DOM 與標題結構理解頁面，但沒有「愈早出現，SEO 權重就愈高」這種簡單規則。第二個是無障礙：視障讀者用螢幕閱讀器瀏覽時，是依 DOM 順序朗讀，如果視覺上的主角在程式碼裡排很後面，他們會先聽到一堆次要訊息才聽到重點，體驗很卡。

先把 DOM 排成有意義的閱讀順序，再用 Grid 調整佈局。傳統 order 與網格定位不會同步更動預設的朗讀及 tab 順序，詳見Grid 與無障礙說明；重排後需實測。圖片 alt 依用途設定，純裝飾圖可用空 alt，並核對標題、對比與操作。

預留圖片與動態內容空間可以減少部分位移，但固定卡片尺寸也可能裁切文字。LCP 需從實際視窗與載入結果量測，不必然是最大卡片；確認資源後再調整載入優先順序，首屏 LCP 圖片不要延遲載入。 延伸可參考Core Web Vitals。

手機上的 Bento：要折疊，千萬別縮小

Bento 在桌機上看起來很美，但大部分的災難都發生在手機上。最常見的錯誤是把桌面版的格狀版面整個等比例縮小，結果在手機上每個方塊變成一條條窄到看不清的長條，字小到讀不下去。

窄螢幕可減少欄數或改成單欄，依內容是否還能完整閱讀及操作決定。先維持合理 DOM 順序，再檢查視覺、螢幕閱讀器與焦點，不要只用 order 把主角移到最上面就視為完成。

Bento 與其他 RWD 一樣，需要按內容決定斷點。兩欄或單欄都可能合適；固定高度、長文字和寬圖片仍可能溢出，因此不能保證折疊就沒有截斷問題。 延伸可參考響應式網頁設計（RWD）。

觸控目標需要大小與間距一起檢查。WCAG 2.2 AA 的 2.5.8 以 24×24 CSS 像素或符合條件的間距／例外判斷；44×44 是 AAA 2.5.5 的增強要求，也有例外。可採較大的專案目標，但不把 44px 當成所有情境的 AA 必要條件。

讓 Bento 看起來高級的三個微調

同一個 Bento 結構，有人做出來像 Apple，有人做出來像折價券傳單。差別通常落在三個微調，跟結構的關係反而沒那麼大。

留白：內距與格間距應支援分組和閱讀，不能靠固定刪字比例判斷。若資訊放不下，可調整格線、分層內容或改用其他佈局，避免裁切必要文字。

第二個是配色。Bento 的方格邊界已經提供了視覺結構，所以配色反而要收斂。我會建議一個版面用一到兩個主色，搭配中性色（白、灰、淺米），再把品牌色用在一兩個強調格上就好。配色邏輯可以參考我們寫過的 色彩學指南跟 網站配色實戰那篇的四步驟流程。顏色一多，Bento 就會從「俐落」變成「吵雜」。

第三個是字體。Bento 裡每個方塊的文字量都很少，所以字體的質感會被放大檢視。英文建議挑一套有個性的展示字體當標題，內文用乾淨的無襯線字；中文則要注意字重與級數的層級，標題、副標、內文要有明顯落差。選字思路可以看 英文字體推薦跟 中文字體指南這兩篇的字庫。

Bento 的視覺素材哪裡找：圖片、圖示、3D 元件

素材應協助說明內容，文字也可以構成 Bento 主體。需要圖片、圖示或 3D 元件時，再確認用途、風格與授權，不必為每個卡片強加裝飾。

先決定素材的共同規則，例如色彩、裁切與線條。攝影、插畫和圖示可以混用，但要有一致的用途與辨識；不能只靠來源網站標示「免費」就推定所有素材與用途都已獲授權。 延伸可參考商用免費圖庫、免費圖示網站、3D 素材資源。

選圖時檢查裁切是否保留重點，圖示是否清楚一致。3D 渲染圖、影片與即時 3D 的成本及效能不同，應看輸出檔案和實際載入；不能把「使用 3D」直接等同速度較慢。

如果你沒有設計資源，也不想花錢買素材，最省事的路線是用純色塊加字體來做 Bento。前面提過，Bento 的本質是格狀層級，圓角陰影照片都只是手法。用品牌色切出幾個色塊，配上大字體的標題與短文案，照樣能做出乾淨有力的 Bento 版面，而且載入快、好維護、手機上更穩。素材是加分項，不是必要條件，先把結構跟配重做對，素材再慢慢補。

Bento Grid 跟其他版面比：一張表幫你決定

用一張表把 Bento 跟其他常見版面做比較，讓你在開工前就能判斷這個頁面該不該用 Bento。沒有哪種版面絕對好，只有適不適合當下的內容與目的。

如果你的頁面同時有「想讓讀者一次看到很多選項」跟「這些選項彼此獨立、沒有強制先後」這兩個條件，可以把 Bento 列入原型比較，仍需實際驗證。想看更多不同版面的實例找靈感，可以逛逛我們整理的 實用網頁排版範例與 網頁設計靈感網站，對照 當前網頁設計趨勢，看 Bento 怎麼跟其他風格混搭。如果你想從更大的框架理解這些選擇，網頁設計完整指南把 UI 原則、響應式與 SEO 友善架構串在一起，適合當配套讀。

五個我會回頭檢查的 Bento 常見錯誤

做完一個 Bento 版面，我自己會固定跑一輪檢查清單。這五個是出現頻率最高的問題，大部分的人做壞都壞在這裡。

1. 每格都想當主角。格數加起來超過網格預算，視覺重量分散，沒有焦點。回去砍訊息，讓一個頁面只有一到兩個主角。
2. 方塊內容塞太滿。每格都貪心想多放一點，結果每格都擠。記得內容要比「剛好」再少一點，留白是 Bento 的命。
3. 手機版直接等比例縮。桌面版的並排在手機上變成窄長條，讀不下去。依內容減少欄數，保持有意義的 DOM、視覺及焦點順序。
4. 格與格的間距不一致。有的緊有的鬆，看起來就像沒對齊。固定一個 gap 值，整個版面套用同一個。
5. 導引訊息藏得太深。報名按鈕、聯絡連結被埋在小格裡，使用者找不到下一步。導引訊息要放在動線終點，夠大夠顯眼。

這份清單跟 自架網站常見錯誤裡的大原則是通的：大部分的網頁設計問題都不是出在技術，而是出在「沒有取捨」。Bento 把取捨這件事放大了，因為每個方塊的大小本身就是一個取捨的決定。更多關於按鈕與行動呼籲怎麼設計才容易被點，可以搭配 CTA 設計指南一起看。

不同頁面類型的 Bento 變形

Bento 不是一種固定版型，它是一套可以變形的骨架。同一套「分類、配重、組裝」邏輯，套到不同類型的頁面會長出不同的樣子。底下用一張表帶你看四種常見頁面各自適合的 Bento 變形，讓你知道同樣的工具怎麼按場合調整。

作品集跟產品總覽這類頁面，方塊裡的圖片比例最好先統一。Bento 方塊的尺寸可以不同，但內部圖片若有直式、橫式與正方形混用，裁切後容易顯得零散。可以先定兩到三種圖片比例，例如寬格用 16:9、方格用 1:1，再讓素材配合這些比例。範本骨架則可參考作品集範本的挑選決策表，依作品型態、主要觀眾與更新頻率排除不適合的版型；更完整的展示類型可再看作品集範本。

另一個值得拿出來講的變形是後台 Dashboard。很多 SaaS 產品的使用者介面其實就是 Bento 的延伸：一個螢幕裡同時擺放營收數字、折線圖、待辦清單、通知，每個資訊模組各佔一格。Dashboard 的 Bento 配重邏輯跟行銷頁不同，它看的是「哪個數字使用者每天第一眼要看」，把那個放最大，次要指標圍繞周圍。同樣的骨架，換個配重邏輯就換了用途，這就是 Bento 為什麼能從蘋果產品頁一路用到企業後台的原因。

下一步：安排一次 Bento 草稿練習

下面提供四個練習時段作為範例，總計約 90 分鐘；初次實作、內容或工具不同可能需要更久，也不等於完成上線驗收。

1. 列出內容：按主要訊息、佐證與操作需求分組，四種角色只是一種整理方法。
2. 安排網格：依內容選欄數與跨格，不必把格數填滿，也不要為了固定總格數刪除必要資訊。
3. 畫草圖：使用接近實際長度的標題與內文，先檢查主次、連結辨識與閱讀順序。
4. 實作並驗證：依專案決定設計起點，持續檢查不同寬度、鍵盤順序及真實內容，不把手機版當作桌面格子的機械堆疊。

完成四步後，可得到待測試的草稿。接著用真實內容、不同寬度、文字放大與鍵盤操作驗證，再處理留白、字型、配色及效能；不能只看草圖就宣稱不會破版。

有一件事要提醒你：Bento 不是做一次就永久定型的版面。隨著你的產品線擴充、活動訊息更新、新文章累積，原本配重平衡的版面會慢慢失衡，主角被擠、佐證格爆量、導引按鈕被推到角落。我自己的習慣是每季固定回頭審一次首頁跟產品總覽的 Bento，重新跑一遍「分類、配重、組裝」的流程，看哪些訊息該升格、哪些該降格或移除。把 Bento 當成需要定期保養的骨架，而不是一次性的裝潢，它才會持續替你的轉換率與使用者體驗把關。

如果你正在煩惱 Bento 該套在哪一種頁面，我會建議從兩種頁面開始：一是品牌官網的首頁，二是一頁式活動頁。這兩種頁面天生就是「資訊多、要同時被看見」，是 Bento 最能發揮價值的地方。作品集類的可以參考作品集網站設計的結構，把 Bento 拿來排作品矩陣也很適合。

Bento Grid 說到底，是一套把「取捨」具象化的排版方法。它逼你在開工前就想清楚：什麼最重要、什麼次要、什麼可以不要。當你把這個取捨想清楚了，就算不用 Bento，你的版面也不會差到哪裡去。現在，打開你那個一直覺得「哪裡怪怪的」的首頁，用這套邏輯重新看一次，你會馬上看出哪裡該放大、哪裡該砍掉。