應該說從去年開始這個便當盒感覺的網站設計就很常可以在各種地方看到，我個人平常都會在Awwwards之類的網站打bento box/bento grids來找相關設計，真的很可愛。而且當網站足夠responsive的話，看那流暢絲滑響應式設計真的很舒服。我們的英文網站也是照著這種想法來設計和開發的，我們之後想出的一款遊戲的視覺網站也是bento grid XD 喜歡就多用。總之月鹿盒子會在以下的文章先和你推薦一些可以直接複製和參考的bento box css (還有相關tool推薦)，一些教學和推薦網站。
5個便當盒風格CSS/Bento grids CSS
深色便當盒格(CSS Bento Grid )
由Ryan Mulligan 所寫的CSS Bento Grid 好看又實用，它是responsive的所以想要用的人可以直接改內容就好了。不愧是便當盒Grid就算是深色模式也是賞心悅目。
See the Pen CSS Bento Grid by Ryan Mulligan (@hexagoncircle) on CodePen.
遊戲便當盒設計(Gaming-/RPG-Profile)
Jazzy寫的Gaming-/RPG-Profile，這位Jazzy寫的東西真的又美又好看，重點是他也喜歡動漫w 他本人的介紹也是Bento style。
See the Pen Gaming-/RPG-Profile by Jazzy (@Jazzzy92) on CodePen.
See the Pen WIP Portfolio Page by Jazzy (@Jazzzy92) on CodePen.
Dashboard Grid Layout
Sharishth寫了Dashboard Grid Layout，背景有種黃昏之美然後各種Grid的大小排列很好看，半透明毛玻璃設計真的綺麗。Hover grid的時候會有一個小pop up然後背景變成白色的一個特效。
See the Pen Dashboard Grid Layout by Sharishth (@sharishth) on CodePen.
財經儀錶板格Grid for a Dashboard
Dusko Stamenic寫的Grid for a Dashboard ，這個Grid也是responsive的不過內容就要自己想了，作者一開始應該是以財報作為領趕來寫的。
See the Pen Grid for a Dashboard by Dusko Stamenic (@DuskoStamenic) on CodePen.
他還寫了另一個好看的響應式Grid。
See the Pen Responsive Dashboard Grid with Draggable Widgets by Dusko Stamenic (@DuskoStamenic) on CodePen.
bento layout w/ grid view-transition
Vivi Tseng寫的bento layout w/ grid view-transition (codepen.io)，是便當盒風格的圖片展示區，點圖片之後會放大然後被換到左邊的大平台，超棒的特效。
See the Pen bento layout w/ grid view-transition by Vivi Tseng (@vii120) on CodePen.
2個Bento Grid CSS教學
以下推薦了兩個教學有html基礎就可以學起來的，作者們都寫得和說明的很詳細，最大的缺點大概就是他們都說英文吧，不過會code html的話英文就沒什麼問題啦w 我做得到你也一定可以。
如何在Web專案裡使用Bento Grid設計?
Jaja Ibifubara David在FCC寫的如何在Web專案裡使用Bento Grid設計 (How to Use Bento Grids Design in Your Web Projects) 基本上鉅細靡遺的說明和教導了如何應用便當盒是網格設計和如果打Bento Grid的代碼。之後可以寫出這樣的一個demo。
如何用 Flexbox 寫 CSS Bento 網格?
How to Web Dev在youtube上有一個從零開始寫bento grid的教學影片，他有在影片裡解釋flexbox的邏輯和用法，是英文影片沒錯，不過youtube現在會生產字幕和翻譯，基本上就算聽不懂跟著code完全沒問題。
5個好用的CSS 格線佈局生成網站
如果看完codepen和youtube教學後慧根還是沒辦法幫助我們寫自己的bento box設計的話，以下推薦的網站和工具們都很實用。
CSS Grid Generator
用滑鼠抓然後畫出來想要的Grid大小然後在按Please may I have some code之後就得到相對的設計了。
CSS Grid Layout Generator
也是一樣點選+然後調整大小後就可以看到相對應的code在下面。我個人平常最常用這個Angrytool來複製Grid，有帶顏色分網格比較不會迷失方向XD
CSS Layout Generator
bradwoods所寫工具，他表示這個網站的工具是主要用來布局網格之間距離和排列的，四捨五入就是可以得到各種grid排版的code。
Bento Grid Generator 🍱
XaviRN 所製作的一個非常好用的工具，想怎麼調便當盒風格就怎麼調w 還有支援html+css組合和html+tailwind。
Interactive CSS Grid Generator | Layoutit Grid
Layoutit 是一個超好用的 CSS Grid，可以給你滿滿的HTML和CSS，我們可以加更多列和行，調整距離兼具之類的，也是responsive的，非常的響應式設計。
