Bento 首页布局实验

背景

传统个人站点是一条从 Hero 到 Footer 的单列长卷，信息密度低，也没有「空间感」。想试试把首页当成一块可以摆放的桌面。

做法

• 12 栅格为桌面基线，8 / 4 栅格逐档降级。
• 每档断点用 grid-template-areas 显式定义模块位置，避免中屏碎裂。
• 模块高度由内容决定，不做固定行高，避免出现大量空白。

难点

• 中屏最难：980–1199px 时三列会挤成两列半，最后干脆给 8 栅格单独排了一套区域，而不是让 12 栅格自动折行。
• 移动端顺序不等于视觉顺序：grid-template-areas 换了顺序之后，Tab 焦点顺序仍按 DOM 走，所以在移动端把资料卡放在 Hero 之后，焦点顺序反而更自然。

结果

首屏可以同时看到个人卡、Hero、三张统计卡，桌面端模块之间的视觉节奏比单列长卷紧凑得多；四档断点实测无横向溢出。