看到「Bento」你會怎麼發音？扁東？對，就是日語「弁当」，便當。

便當和網頁設計有什麼關係？

什麼是 Bento Design？

便當最明顯的特色就是「分不同的格子、裝不同的配菜」。

套用在網頁設計上，就是將資訊分成小而獨立的區塊，強調整潔、有序的佈局和視覺分隔。

Bento Design 特別適合應用在資訊較多的網站或應用程式上。

RWD版型

一個網站，在怎麼在各種尺寸的手機、平板還是電腦上顯示都能完完整整沒有破版或跑圖？

這就是響應式網頁設計，簡稱 RWD（Responsive Web Design）。

RWD 能讓一個網頁配合不同的螢幕尺寸，自動調整版面，讓使用者看到的網頁都是資訊完整、方便操作的。

螢幕尺寸那麼多種，開發人員要怎麼讓網頁去配合？彈性縮放？

Bootstrap 12格

學習 Responsive Web Design，不管是網頁設計師或前端工程師，一定被要求要知道什麼是Bootstrap。

Bootstrap 是一個超強大的前端框架，包含一堆現成的設計元素和功能，像是預設的樣式和元件，按鈕、表單、導航欄等等，讓你不用從零開始設計。

它提供了一個 12 格的Grid 網格系統，讓你可以靈活地安排不同裝置上的元素位置、調整頁面佈局，確保在手機、平板和電腦上都能有良好的瀏覽體驗。

透過網格系統，就能根據螢幕大小自動調整元素的大小和位置，確保無論你用什麼裝置看網站，內容都能完美呈現。

Bento Design

Bento 和 Bootstrap 一樣，都使用 Grid 網格系統，而且版面佈局比 Bootstrap 更彈性！

先把內容分成小區塊，像便當盒一樣，然後根據螢幕大小調整這些區塊的位置和大小。

1. 使用彈性網格：用 CSS Grid 或 Flexbox。 把內容分成小格子，讓這些格子能隨著螢幕大小自動排列。
2. 媒體查詢：利用 CSS 的media 設定不同螢幕尺寸的樣式。
3. 調整區塊大小：根據螢幕大小，調整每個區塊的比例和間距。
4. 彈性圖片和文字：圖片和文字要能隨著螢幕大小自動調整。

就能在不嵌入Bootstrap 的情況下也能做出 Responsive Web 。

我這次的練習心得

這是我這次的練手之作，通常 Responsive Web Design 的圖片會隨著螢幕尺寸縮放，我想試點不一樣的，所以反過來把大圖片設成底圖，縮放的反而是介面。

手繪 Wireframe

我自己設計的A4 手繪 Wireframe 紙，主要是 Mobile 和 Desktop 尺寸。這兩個螢幕尺寸的版面配置變化最大，偷懶不了。

我把自用的 Wireframe 上傳到 Google 硬碟，有需要的可以下載試試。

https://drive.google.com/file/d/1QUeyFTCH-5HhRgWFpVNXcKuwAFE7zkmz/view?usp=drive_link

Figma 畫 Mockup

軟體操作我就不浪費篇幅講了，簡單提一下 Grid 數值。

Bento Design 最大的特色就是「彈性」，包含 Grid 設定，沒有一定要幾欄（Column）和幾列（Row），非常自由。

每一個格子的尺寸、間隙（gutter）尺寸都可以自訂，大概抓個比例就好。

如果你想要和我一樣做個邊框，記得要設 Margin 唷！（參考上圖）

CSS

會寫 CSS 在這一步比較吃香，可以真的做點什麼出來，我全部使用 Grid，最重要的 CSS 就是這 3 行。

grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(9, 1fr);
gap:0vw;

照著 Mockup 數格子把內容填進去，然後針對不同裝置尺寸調整元件等等，和以往做 RWD一樣。

最煩的反而是透出底圖的那個內凹圓角，我把語法試成功，但沒搞懂為什麼會成功，算了以後再說。

結論

實際 RWD 縮放的影片。

我做的不能算什很正規的 Bento Design，某些程度算是炫技試手，不太能做為真正產品的網頁使用。

想看更多真實網站範例，請到 Bento Grids 這個網站。

https://bentogrids.com

如果你搞不懂 Bootstrap 是什麼，又想做 RWD，那 Bento Design 挺適合初學者入門的。

拉好參考線，照格子擺配菜！