What is Bento Grid UI?什么是 Bento Grid UI？
Apple's 2022 iPhone 14 product page turned a grid of asymmetric rounded tiles into the decade's most copied web layout, borrowing its name and compartmentalized logic from the Japanese bento box.苹果2022年 iPhone 14 产品页，把一整套大小不一的圆角方块网格，变成了这十年间被模仿最多的网页版式——它的名字与分格逻辑，都借自日式便当盒。
Bento Grid UI in briefBento Grid UI 速览
Bento grid UI is a layout pattern, not a color palette: a single tight grid holding tiles of varying size and span, each tile a self-contained rounded rectangle carrying one feature, statistic, or idea. A few large cells carry the headline moments; several smaller cells hold supporting details. The name comes directly from the Japanese lunch box it resembles — a tray of neatly separated compartments, each with its own contents, all fitting together into one coherent whole.便当格栅是一种版式模式，而非一套色板：一整套紧凑的网格中，容纳着大小、跨度各不相同的方块，每个方块都是一个自成一体的圆角矩形，承载一个功能点、一项数据或一个想法。少数几个大格承载着最核心的信息，若干小格则容纳辅助性的细节。这个名字直接来自它所形似的日式便当盒——一个托盘，被整齐地分隔成若干格，每一格盛放各自的内容，却又共同拼合成一个连贯的整体。
The dark variant popularized alongside Apple's product marketing sits on a near-black canvas rather than pure white. Individual tiles are differentiated from that canvas and from each other mainly through subtle surface lightness — a tile reads as slightly raised or slightly recessed through tone alone — rather than through hard borders or heavy drop shadows. The restraint is deliberate: the grid should feel calm and premium, not busy.随着苹果产品营销一同流行开来的深色变体，底色是近乎全黑的画布，而非纯白。各个方块与这块画布、以及方块彼此之间的区分，主要靠微妙的表面明度差异来实现——一个方块靠明度本身，就能读出略微凸起或略微凹陷的感觉——而不是靠生硬的边框或厚重的投影。这种克制是刻意为之的：整套网格应当读起来沉静、高级，而非拥挤忙乱。
Typography carries most of the visual confidence. Headlines inside the larger tiles are set large, tightly tracked, and unapologetically bold against the dark ground, while supporting copy stays small and quiet. A single accent color, usually a saturated blue, is reserved almost exclusively for interactive elements — buttons, links, active states — so that its rare appearance always reads as 'you can act here' rather than as general decoration.字体承载了这套视觉体系中大部分的自信感。较大方块内的标题，字号大、字距收紧，在深色底面上毫不掩饰地采用醒目的粗体；辅助性文案则保持小而安静。单一的强调色——通常是一种饱和的蓝色——几乎只保留给交互元素使用：按钮、链接、激活状态，这样它每一次难得出现，读起来都是「这里可以操作」，而非泛泛的装饰。
Where does Bento Grid UI come from?Bento Grid UI 从何而来？
The word 'bento' names a compartmentalized Japanese lunch box, and the term's application to web layout is a genuinely recent coinage — a 2020s design-community shorthand rather than an established term of art from print or interface design history. Even so, the underlying idea of organizing varied content into a modular grid of differently sized cells has a much older lineage in editorial and print design, where designers have long used modular grids to give visual order to unequal amounts of content on a single page or spread.「便当」（bento）一词指的是一种分格的日式午餐盒，而把这个词用来指代网页版式，其实是一个相当晚近的说法——它是2020年代设计圈里的一种简称，而非印刷或界面设计史上早已确立的专业术语。尽管如此，把不同内容组织进一套模块化、格子大小各异的网格这一底层理念，在编辑与印刷设计中却有着远为古老的谱系——设计师长期以来都在用模块化网格，为一页或一个跨页上分量不均的内容，赋予视觉秩序。
A closer digital ancestor is Microsoft's Metro design language, introduced with Windows Phone and Windows 8 around 2010 to 2012, which organized a Start screen into a grid of flat, colorful, differently sized tiles representing apps and live content. Metro established the conceptual template — asymmetric tile sizes within one grid, each tile self-contained — even though its visual execution, built from flat saturated color blocks, looked very different from the restrained, near-monochrome tone the term now usually implies.一个更直接的数字先祖，是微软大约在2010至2012年间随 Windows Phone 与 Windows 8 推出的 Metro 设计语言，它把开始屏幕组织成一套扁平、色彩鲜艳、大小不一的方块网格，分别代表应用与实时内容。Metro 确立了这套概念模板——同一网格内非对称的方块尺寸，每个方块自成一体——尽管它建立在扁平饱和色块之上的视觉呈现，与如今这个词通常所指的那种克制、近乎单色的调性，看起来相当不同。
The modern usage crystallized in September 2022, when Apple's iPhone 14 product page arranged its feature callouts — camera, chip, satellite emergency messaging, crash detection — as a grid of rounded tiles of varying size, several large enough to carry a headline and an image, others small enough to hold a single spec. The page was widely noticed and copied almost immediately within design communities on platforms like Dribbble and Twitter/X, and the term 'bento grid' began attaching itself specifically to this restrained, tile-based, Apple-style treatment rather than to modular grids in general.这个词的现代用法，在2022年9月定型——当时苹果的 iPhone 14 产品页，把相机、芯片、卫星紧急信息、碰撞检测等功能亮点，组织成一套大小不一的圆角方块网格，其中几格足够大，能承载一句标题与一张图片，另一些格则小到只容纳一项参数。这个页面几乎立刻在 Dribbble、Twitter/X 等平台的设计圈内被广泛注意到并被模仿，「便当格栅」这个词，也开始特指这种克制的、以方块为单位、苹果式的处理方式，而非泛泛指代模块化网格。
Adoption accelerated fast after that. The link-in-bio product Bento, launched around the same period, built its entire personal-page format around literal bento-box compartments, helping fix the vocabulary in the design community's everyday language. Through 2023, software and AI startups adopted bento layouts for landing and pricing pages at a striking rate, treating the pattern as shorthand for 'premium, technical credibility' — to the point that, by 2024, design commentators were already describing bento grids as an oversaturated cliché of startup marketing, even as the pattern remained genuinely effective when executed with real hierarchy and restraint rather than applied as a template.此后的普及速度相当快。链接聚合产品 Bento 大约在同一时期上线，把整个个人页面的格式，完全建立在字面意义上的便当格分隔之上，帮助把这个词汇固定进了设计圈的日常语言。进入2023年，软件与 AI 初创公司以惊人的速度，把便当格栅用到了着陆页与定价页上，把这种模式当作「高端、有技术可信度」的速记符号——以至于到了2024年，设计评论者已经开始把便当格栅描述为初创公司营销中一种被过度使用的陈词滥调，即便如此，只要执行时保有真正的层级与克制，而不是套用模板，这种版式依然确实有效。
What defines the Bento Grid UI look?Bento Grid UI 的视觉特征是什么？
Asymmetric Tile Grid非对称方块网格
All tiles share one underlying grid, but occupy different spans within it — some stretching across multiple columns or rows, others sitting as small single cells. The asymmetry is intentional and hierarchical: tile size signals importance directly, with the largest tiles reserved for the ideas the layout most wants noticed.所有方块共享同一套底层网格，却在其中占据不同的跨度——有的横跨多列或多行，有的则是单独的小格。这种非对称是刻意为之、且具有层级含义的：方块尺寸直接传达重要性，最大的方块被留给这个版面最想让人注意到的想法。
Surface-Tone Differentiation表面明度分层
Tiles separate from the canvas and from one another primarily through subtle differences in surface lightness rather than through borders or heavy shadow. A tile reads as a distinct object because it sits a shade lighter or darker than its surroundings, producing a calm, unified surface rather than a page of visibly boxed cards.方块主要靠与画布、以及彼此之间微妙的明度差异来区分，而非依赖边框或厚重的投影。一个方块之所以能被读作一个独立的物体，是因为它比周围环境浅一度或深一度，这样得到的是一种沉静、统一的表面，而非一页明显被方框圈住的卡片。
Confident Display Type自信的展示字体
Headline text inside the larger tiles is set large and tightly tracked, with letters sitting close together for a compact, confident block of type rather than loosely spaced display copy. This tight setting is part of what gives the layout its premium, engineered feeling.较大方块内的标题文字字号偏大、字距收紧，字母紧密相邻，形成一个紧凑、自信的文字块，而非松散排布的展示文案。这种紧凑的排布方式，正是这套版式带来那种高级、精工感的部分原因。
Single Accent Discipline单一强调色纪律
Only one accent color appears across the entire layout, and it is reserved almost exclusively for interactive elements — buttons, active links, toggles. Everything else stays within the neutral canvas-and-text palette, so the single accent always carries meaning rather than becoming background noise.整个版式中只出现一种强调色，而且几乎只保留给交互元素使用——按钮、激活状态的链接、开关控件。其余一切都留在中性的画布与文字色板之内，这样，这唯一的强调色才始终承载着意义，而不会沦为背景噪音。
Uniform Corner Language统一的圆角语言
Every tile, regardless of size, shares the same rounded-corner treatment, which is what visually unifies a grid holding very different kinds of content — a large hero tile, a small numeric callout, an icon-only tile — into one coherent family of objects rather than a mismatched collage.无论尺寸大小，每一个方块都共享同一种圆角处理方式，正是这一点，把一套容纳着截然不同内容类型的网格——一个大的主视觉方块、一个小的数字标注、一个纯图标方块——在视觉上统一成同一个家族的物体，而不是一堆拼凑起来、彼此不搭的碎片。
Generous Negative Space充裕的留白
Gaps between tiles are kept wide and consistent, and no tile crowds its own content edge-to-edge. This breathing room is what keeps a grid holding many discrete pieces of information from reading as cluttered — density is managed through spacing discipline, not through shrinking individual tiles.方块之间的间隙保持宽阔且一致，任何一个方块内部的内容都不会顶到边缘。正是这份呼吸空间，让一套容纳着许多离散信息碎片的网格，不至于读起来杂乱——密度是靠间距上的自律来管理的，而不是靠把每个方块本身缩小来实现的。
Who shaped Bento Grid UI?谁塑造了 Bento Grid UI？
Apple's in-house marketing design team built the September 2022 iPhone 14 product page that crystallized the modern bento grid template — asymmetric rounded tiles, a near-black or white canvas, and a single accent color — and turned it, almost overnight, into one of the most widely referenced layouts in contemporary web design.苹果的内部营销设计团队，打造了2022年9月那个把现代便当格栅模板定型的 iPhone 14 产品页——非对称圆角方块、近黑或纯白画布，以及单一强调色——并几乎在一夜之间，把它变成了当代网页设计中被引用最多的版式之一。
Apple's broader interface design tradition — large confident typography, generous negative space, a restrained single accent color, and consistently rounded corner language — supplies the visual grammar that the bento grid trend borrows almost wholesale, which is part of why the pattern reads as 'premium tech' even when used by companies with no connection to Apple.苹果更广义的界面设计传统——自信的大号字体、充裕的留白、一种克制的单一强调色，以及始终如一的圆角语言——为便当格栅这股潮流提供了几乎被整体借用的视觉语法，这也是为什么即便是与苹果毫无关系的公司使用这种版式，它依然读起来「高端科技」的部分原因。
The design team behind Windows Phone and Windows 8's Metro language, introduced around 2010 to 2012, established the conceptual ancestor of the bento grid: a Start screen built from a single grid of asymmetrically sized, self-contained tiles. Metro's flat, saturated color execution looked very different from the restrained modern bento aesthetic, but the underlying tile-grid logic is a direct precedent.微软在2010至2012年间推出 Windows Phone 与 Windows 8 的 Metro 设计语言的团队，确立了便当格栅在概念上的先祖：一个由单一网格构成的开始屏幕，方块尺寸非对称、各自自成一体。Metro 那种扁平、饱和色块的视觉呈现，与如今克制的现代便当美学看起来相当不同，但其底层的方块网格逻辑，是一个直接的先例。
This link-in-bio startup launched around the same period Apple's page went viral, building its entire product around literal bento-box-style personal pages. By naming itself directly after the concept, it helped fix 'bento grid' as the accepted term for the pattern within the broader design and startup community.这家链接聚合类初创公司，大致在苹果那个页面走红的同一时期上线，把整个产品都建立在字面意义上的便当盒式个人页面之上。由于它直接以这个概念为自己命名，也帮助把「便当格栅」固定为设计与创业圈内普遍接受的说法。
Across 2023, developer tools and AI startups adopted bento layouts for landing and pricing pages at a striking rate, treating the pattern as visual shorthand for technical credibility and premium positioning. This mass adoption is what pushed the style from an Apple-specific curiosity into a recognizable, sometimes over-relied-on genre of its own.进入2023年，大量开发者工具与 AI 初创公司，以惊人的速度把便当格栅用到了着陆页与定价页上，把这种版式当作技术可信度与高端定位的视觉速记。正是这种大规模的采用，把这种风格从苹果专属的一个个案，推成了一个可被辨识、有时甚至被过度依赖的独立类型。
How do you use Bento Grid UI today?今天怎么用 Bento Grid UI？
On presentation slides, bento thinking translates directly into a feature-overview slide: instead of a bulleted list, arrange the same information as a grid of tiles, one large tile for the headline capability and several smaller tiles for supporting features. Cover slides can use a single dominant hero tile with the deck title, echoing the way a large tile anchors the original web layout.在演示文稿中，便当思维可以直接转化为一页功能概览：与其罗列要点列表，不如把同样的信息排成一套方块网格——一个大方块承载核心能力，若干小方块承载辅助功能。封面页可以用一个占主导地位的主视觉方块承载整份文稿的标题，呼应原始网页版式中大方块锚定整体的方式。
The style is a poor fit for genuinely narrative or emotional cover moments — its compartmentalized logic wants discrete facts, not a single sweeping statement, so save it for slides whose job is 'here are several distinct things,' not 'here is one big idea.'这种风格并不适合真正叙事性或情感性的封面时刻——它那分格化的逻辑想要的是离散的事实，而非一句气势磅礴的陈述，所以应把它留给那些任务是「这里有几件各自独立的事情」，而非「这里有一个宏大想法」的页面。
For web interfaces, this is close to a native fit: dashboards can organize metrics as differently sized tiles with the most important number in the largest cell, and pricing pages can render tiers as bento cells of varying size, with the recommended tier occupying visibly more space rather than relying on a badge to signal importance. The single-accent-color discipline maps directly onto call-to-action buttons across both contexts.对于网页界面，这几乎是一种天然的契合：仪表板可以把各项指标组织成大小不一的方块，把最重要的数字放进最大的格子里；定价页面则可以把各档位呈现为大小不同的便当格，让推荐档位明显占据更多空间，而不是依赖一个徽章去暗示其重要性。单一强调色的纪律，在这两种场景中都能直接映射到行动号召按钮上。
In editorial and marketing work, the pattern suits product marketing pages, portfolio and link-in-bio pages, and any 'everything you need to know' overview page where the content is genuinely a set of discrete facts rather than a continuous argument. It is a poor match for long-form editorial writing, where a reader needs continuous flow rather than compartmentalized chunks.在编辑与营销内容中，这种版式适合产品营销页、作品集与链接聚合页，以及任何一页「你需要知道的一切」概览页面——前提是内容本身确实是一组离散的事实，而非一段连贯的论述。它并不适合长篇编辑写作，因为读者需要的是连贯的阅读流，而非被切割成一格一格的碎块。
The most common mistake is building a grid with no dominant tile at all — when every cell is roughly the same size, the layout loses the hierarchy that makes bento grids readable and starts to look like an undifferentiated pile of cards. A second common mistake is applying the accent color across many tiles instead of reserving it for one or two truly interactive moments, which flattens the very signal the restraint is supposed to create. A third is ignoring the underlying grid discipline — tiles that don't actually align to consistent column and row lines read as sloppy rather than deliberately asymmetric.最常见的错误，是搭建一套完全没有主导方块的网格——当每一格大小都差不多时，版式就失去了让便当格栅可读的那种层级，开始显得像一堆无差别的卡片。第二个常见错误，是把强调色用在了许多方块上，而不是只保留给一两处真正的交互时刻，这会抹平那种克制原本要制造的信号。第三个错误，是忽视底层的网格纪律——如果方块没有真正对齐到一致的列线与行线，读起来就会显得潦草，而非刻意为之的非对称。
Bento Grid UI — FAQBento Grid UI · 常见问题
Is a bento grid the same thing as a Pinterest-style masonry grid?便当格栅和 Pinterest 式的瀑布流网格是一回事吗？
No, and the distinction matters. A masonry grid arranges items of varying height into flowing columns that shift dynamically based on content, with no fixed underlying grid governing where any single item sits. A bento grid does the opposite: every tile sits on a fixed, predetermined grid, and its size is a deliberate design decision rather than a byproduct of however tall its content happens to be. Masonry feels organic and unpredictable; bento feels engineered and intentional.不是，而且这个区别很重要。瀑布流网格把高度各不相同的项目，排列进随内容动态变化的流动列中，不存在一套固定的底层网格去规定任何一项该落在哪里。便当格栅恰恰相反：每一个方块都落在一套固定、预先确定的网格上，它的尺寸是一个刻意的设计决定，而非取决于内容碰巧有多高的副产品。瀑布流给人的感觉是有机、不可预测的；便当格栅给人的感觉则是经过工程设计、刻意为之的。
Does bento grid UI only work in dark mode?便当格栅界面只能用在深色模式下吗？
No — Apple itself alternates between light and dark versions of the same underlying pattern across different product pages. The dark, near-black variant tends to read as more premium and tech-forward, which is why it dominates AI and developer-tool marketing, but the same asymmetric-tile, single-accent-color logic works equally well on a light or white canvas, where tiles are differentiated by very light shading or subtle borders instead of tonal lightness.不是——苹果自己在不同产品页面上，也会在同一套底层版式的浅色版本与深色版本之间交替使用。近黑的深色变体往往读起来更高端、更具科技感，这也是它在 AI 与开发者工具营销中占主导地位的原因，但同样一套非对称方块、单一强调色的逻辑，在浅色或纯白画布上同样适用——只是方块的区分，会靠非常浅的底色或细微的边框，而非明度差异来实现。
Is the bento grid trend already overused — should it be avoided?便当格栅这股潮流是不是已经被用滥了——应该避免使用吗？
It has become a recognizable cliché in certain categories, particularly AI and developer-tool landing pages, where it is sometimes applied as a template without real thought about hierarchy. That overuse is a criticism of lazy execution, not of the underlying pattern — a bento grid built with genuine tile-size hierarchy, disciplined spacing, and a single restrained accent still communicates clearly. The pattern is worth avoiding specifically when a team reaches for it by default rather than because the content genuinely consists of discrete, comparably weighted pieces of information.在某些品类中，尤其是 AI 与开发者工具的着陆页里，它确实已经成为一种可被一眼认出的陈词滥调，有时被当作模板套用，却没有真正考虑过层级关系。但这种「用滥了」批评的是懒惰的执行方式，而非这套版式本身——一套真正建立起方块尺寸层级、间距自律、并保有单一克制强调色的便当格栅，依然能够清晰传达信息。真正该避免的，是团队默认地套用这种版式，而非因为内容本身确实由若干离散、分量相当的信息碎片构成。
How many tiles does a layout need before it reads as a proper bento grid?一套版式至少需要多少个方块，才能被读作一个像样的便当格栅？
There is no fixed number, but the pattern needs enough tiles — typically at least five or six — to establish a genuine size hierarchy, with at least one clearly dominant tile and several smaller supporting ones. Fewer than that, and the layout reads as a simple feature comparison or a basic card row rather than a compartmentalized bento composition; the whole effect depends on the eye being able to compare tiles of visibly different size and importance.没有一个固定的数字，但这种版式需要足够多的方块——通常至少五到六个——才能建立起真正的尺寸层级，其中至少有一个明显占主导地位的方块，以及若干更小的辅助方块。少于这个数量，版式读起来更像是一次简单的功能对比或一排基本卡片，而非一套分格化的便当构图；整个效果都依赖于眼睛能够比较出方块之间明显不同的尺寸与重要性。
How is bento grid different from a classic Swiss or editorial modular grid?便当格栅和经典的瑞士风格或编辑类模块化网格有什么区别？
Both rely on an underlying grid to organize content of unequal size, and in that structural sense bento grids are a direct descendant of the modular grid tradition long used in Swiss editorial design. The difference is emphasis: a classic modular grid typically governs a full page of continuous text and image, with the grid mostly invisible to the reader, while a bento grid makes the compartments themselves the visible subject — each tile reads as a distinct object with its own rounded boundary, rather than as an invisible scaffold beneath flowing content.两者都依赖一套底层网格来组织分量不均的内容，在这个结构性的意义上，便当格栅确实是瑞士编辑设计长期使用的模块化网格传统的直系后代。区别在于侧重点：经典的模块化网格通常统摄的是一整页连续的文字与图像，网格本身对读者而言大多是隐形的；而便当格栅则把这些格子本身变成了可见的主体——每一个方块都被读作一个独立的物体，拥有自己的圆角边界，而不是隐藏在流动内容之下的一副看不见的骨架。
Related design styles相关设计风格
Android Bugdroid GreenFriendly tech, reduced to geometry. Vivid green pops from Grey 900 and rounde…友好科技化为几何：明绿从 Grey 900 与圆润字形中跃出。
CircleCI Pipeline-GreenConfidence goes green. Emerald status lines cut through terminal-black pipeli…信心变绿。翠绿状态线切过终端黑流水线网格。
Cursor IDEAI-first code editor. Pure dark surfaces, off-white text, electric blue reser…以 AI 为核心的代码编辑器：近乎纯黑背景、柔白文字、唯一的电光蓝色专为 AI…
GitHub DarkCode-first darkness. Cool-blue canvas, 1px borders, green/red diff lines.代码优先的暗色：冷蓝画布、1px边框、绿红diff线。
Linear 2024Precision down to the millisecond. Near-black, indigo-violet accents, Inter D…开发者工具美学的标杆：近乎纯黑、克制靛紫点缀、Inter Display 字体…
Resend 2024Clean code becomes brand. Pure black, JetBrains Mono, and one green delivered…品牌像 clean code：纯黑、JetBrains Mono、唯一送达绿。