✎修改上方代码，下方实时预览修改左侧代码，右侧实时更新
🧪使用 CSS Grid 构建自适应 Bento 风格布局，展示模块化 UI 组件。
演示了什么：这个 Demo 展示了如何使用 CSS Grid 构建现代化的 Bento（便当盒）风格布局。你将看到一个由不同尺寸模块组成的自适应网格，包含海报、数据图表、波形等 UI 组件，且能随屏幕宽度自动调整排列。
关键实现：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 是实现响应式的核心——它让网格列数自动适应容器宽度，无需媒体查询即可在移动端单列、桌面端多列间切换.cell--pulse { grid-column: span 2; } 利用 Grid 的跨列特性，让宽组件横跨两列，打破单调的方块排列，这是 Bento 布局视觉节奏的关键setInterval 定期修改 .sk--mini-bar 的 height 样式，模拟实时数据流，比纯 CSS 动画更灵活，能体现“动态仪表盘”的感觉动手改一改：
.cell--poster 的 grid-row: span 2 改为 span 3——观察该模块如何纵向拉长，挤压其他模块的布局空间randomizeWave 的更新间隔从 800ms 改成 100ms——感受波形跳动的“高频”与“低频”带来的不同视觉情绪