「Bento」怎麼唸？扁東？對，就是日語「便當」。
但這跟網頁設計有什麼關係？
其實，Bento Design 就像便當一樣，把資訊分格擺放，整齊又有條理！
Bento Design 是什麼？用便當格子理解網頁版型
便當最明顯的特色就是「分不同的格子、裝不同的配菜」。
套用在網頁設計上，就是將資訊分成小而獨立的區塊，強調整潔、有序的佈局和視覺分隔。
但我覺得 Bento Design 真正吸引人的地方，不只是「看起來很整齊」。
而是它在一開始就強迫你面對哪些資訊值得被分開、哪些可以被合併的問題。
哪些內容需要被看見，哪些應該降低重要級別。
當你把內容拆成一格一格時，其實是在重新整理自己的思考順序。
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 更彈性！
先把內容分成小區塊，像便當盒一樣，然後根據螢幕大小調整這些區塊的位置和大小。
- 使用彈性網格：用 CSS Grid 或 Flexbox。 把內容分成小格子，讓這些格子能隨著螢幕大小自動排列。
- 媒體查詢：利用 CSS 的media 設定不同螢幕尺寸的樣式。
- 調整區塊大小：根據螢幕大小，調整每個區塊的比例和間距。
- 彈性圖片和文字：圖片和文字要能隨著螢幕大小自動調整。
就能在不嵌入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 這個網站。
如果你搞不懂 Bootstrap 是什麼，又想做 RWD，那 Bento Design 挺適合初學者入門的。
拉好參考線，照格子擺配菜！
