便当盒布局Bento grid

把大小不同的内容块放进统一网格，主次一眼可见。

海边的一下午

本来只想走一小段，到小路尽头时，已经快日落了。

带出门的

只带了一瓶水，回去的路上就饿了。

路到这里就没了

再往前就是礁石，我找了块平些的石头坐下。

回去时

还是原来那条路。来时没觉得坡有这么长。

鞋里的沙

在海边倒过一次，回到家，袜子里又掉出一些。

把这个效果用在你的项目里

提示词已包含当前参数，并要求 AI 沿用你项目里的内容和设计。

提示词 · 简体中文

沿用我项目现有的技术栈，实现「便当盒布局」。保留真实内容、品牌配色、链接与语义结构，按下面的参数调整排版；不要复制 Tomoyo 的示例文字或海岸插画，不要引入组件库。

用 CSS Grid 排列五个有真实内容的块，默认 3 列，各列 minmax(0, 1fr)，主块跨两列两行；最后一个块跨两列，其余块占一格。网格间距 12px、块内留白 20px、圆角 16px，grid-auto-rows: minmax(112px, auto)，内容按 align-content: start 对齐。行高是下限，长文撑开行，不截断正文、不用固定高度隐藏内容。容器宽度不超过 520px 时改为两列，主块和末块取消跨列跨行；不超过 340px 时改为单列。不要使用 dense、order 或绝对定位改写阅读顺序。

这是一种静态排版效果，不自动播放入场动画。图片加载前预留比例，加载失败保留可读文字与替代说明。支持键盘、触屏、200% 缩放和无 JavaScript 阅读；不要在普通内容块上添加按钮语义。若额外添加过渡，尊重 prefers-reduced-motion，关闭位移及渐变，立即显示最终布局。

实现后列出可调参数，并检查桌面、窄容器、长文案和图片失败时的布局。

提示词 · 中文

便当盒布局Bento grid

把大小不同的内容块放进统一网格，主次一眼可见。

海边的一下午

本来只想走一小段，到小路尽头时，已经快日落了。

带出门的

只带了一瓶水，回去的路上就饿了。

路到这里就没了

再往前就是礁石，我找了块平些的石头坐下。

回去时

还是原来那条路。来时没觉得坡有这么长。

鞋里的沙

在海边倒过一次，回到家，袜子里又掉出一些。

把这个效果用在你的项目里

提示词已包含当前参数，并要求 AI 沿用你项目里的内容和设计。

提示词 · 简体中文

沿用我项目现有的技术栈，实现「便当盒布局」。保留真实内容、品牌配色、链接与语义结构，按下面的参数调整排版；不要复制 Tomoyo 的示例文字或海岸插画，不要引入组件库。

用 CSS Grid 排列五个有真实内容的块，默认 3 列，各列 minmax(0, 1fr)，主块跨两列两行；最后一个块跨两列，其余块占一格。网格间距 12px、块内留白 20px、圆角 16px，grid-auto-rows: minmax(112px, auto)，内容按 align-content: start 对齐。行高是下限，长文撑开行，不截断正文、不用固定高度隐藏内容。容器宽度不超过 520px 时改为两列，主块和末块取消跨列跨行；不超过 340px 时改为单列。不要使用 dense、order 或绝对定位改写阅读顺序。

这是一种静态排版效果，不自动播放入场动画。图片加载前预留比例，加载失败保留可读文字与替代说明。支持键盘、触屏、200% 缩放和无 JavaScript 阅读；不要在普通内容块上添加按钮语义。若额外添加过渡，尊重 prefers-reduced-motion，关闭位移及渐变，立即显示最终布局。

实现后列出可调参数，并检查桌面、窄容器、长文案和图片失败时的布局。

提示词 · 中文

便当盒布局Bento grid

海边的一下午

带出门的

路到这里就没了

回去时

鞋里的沙

调整效果

把这个效果用在你的项目里

便当盒布局Bento grid

海边的一下午

带出门的

路到这里就没了

回去时

鞋里的沙

调整效果

把这个效果用在你的项目里