Bento Grid Pulse — Grid · 在线演示

演示了什么：这个 Demo 展示了如何使用 CSS Grid 构建现代化的 Bento（便当盒）风格布局。你将看到一个由不同尺寸模块组成的自适应网格，包含海报、数据图表、波形等 UI 组件，且能随屏幕宽度自动调整排列。

关键实现：

1. css 中的 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 是实现响应式的核心——它让网格列数自动适应容器宽度，无需媒体查询即可在移动端单列、桌面端多列间切换
2. .cell--pulse { grid-column: span 2; } 利用 Grid 的跨列特性，让宽组件横跨两列，打破单调的方块排列，这是 Bento 布局视觉节奏的关键
3. js 里用 setInterval 定期修改 .sk--mini-bar 的 height 样式，模拟实时数据流，比纯 CSS 动画更灵活，能体现“动态仪表盘”的感觉

动手改一改：

1. 将 css 中 .cell--poster 的 grid-row: span 2 改为 span 3——观察该模块如何纵向拉长，挤压其他模块的布局空间
2. 在 js 中把 randomizeWave 的更新间隔从 800ms 改成 100ms——感受波形跳动的“高频”与“低频”带来的不同视觉情绪