Bento grid

Mix large and small blocks on one grid, with room for each piece of content.

An afternoon by the sea

I'd only meant to go for a short walk. By the time I reached the end of the coastal path, the sun was almost down.

In my bag

Just a bottle of water. I was hungry on the way back.

The path ended here

There were only rocks ahead. I found a flat one to sit on.

Heading back

I took the same path back. The hill hadn't seemed this long on the way down.

Sand in my shoes

I'd emptied them at the beach. Back home, more sand fell out of my socks.

Use this effect in your project

This prompt uses your current settings and asks the AI to keep your existing content and design.

Prompt · 简体中文

沿用我项目现有的技术栈，实现「便当盒布局」。保留真实内容、品牌配色、链接与语义结构，按下面的参数调整排版；不要复制 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，关闭位移及渐变，立即显示最终布局。

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

Prompt · 中文

Bento grid

Mix large and small blocks on one grid, with room for each piece of content.

An afternoon by the sea

I'd only meant to go for a short walk. By the time I reached the end of the coastal path, the sun was almost down.

In my bag

Just a bottle of water. I was hungry on the way back.

The path ended here

There were only rocks ahead. I found a flat one to sit on.

Heading back

I took the same path back. The hill hadn't seemed this long on the way down.

Sand in my shoes

I'd emptied them at the beach. Back home, more sand fell out of my socks.

Use this effect in your project

This prompt uses your current settings and asks the AI to keep your existing content and design.

Prompt · 简体中文

沿用我项目现有的技术栈，实现「便当盒布局」。保留真实内容、品牌配色、链接与语义结构，按下面的参数调整排版；不要复制 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，关闭位移及渐变，立即显示最终布局。

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

Prompt · 中文

Bento grid

An afternoon by the sea

In my bag

The path ended here

Heading back

Sand in my shoes

Adjust effect

Use this effect in your project

Bento grid

An afternoon by the sea

In my bag

The path ended here

Heading back

Sand in my shoes

Adjust effect

Use this effect in your project