纯 css grid 能实现 bento 布局，但必须用多个元素模拟非矩形区域，因 grid-column/grid-row 仅支持连续行列跨度，无法原生支持 l 形等镂空结构。
纯 CSS Grid 能实现 Bento 风格营销页，但必须放弃“一个区块对应一个 HTML 元素”的直觉——浏览器不支持 L 形、T 形跨单元格合并，grid-column 和 grid-row 只接受连续范围（如 1 / 4），无法跳过中间行或列。
为什么不能用单个 <div> 表示橙色 L 形主视觉区
<p>CSS Grid 的跨度机制要求行列索引严格连续。比如想让一个元素从第 1 行第 1 列延伸到第 2 行第 2 列（L 形），实际只能写成 <code>grid-row: 1 / 3; grid-column: 1 / 3，结果是 2×2 正方形，中间会覆盖本该留白或放其他内容的位置。所谓“镂空”“错位拼贴”，必须靠多个独立元素协同定位来模拟。
常见错误现象：
- 用
grid-area写了"l-top l-top l-side l-side"之类自定义命名——无效，grid-area不支持非矩形区域声明 - 尝试用
clip-path或mask剪出 L 形再合并——视觉上像，但语义断裂、可访问性差、打印/截图易出错 - 在同一个
grid-item里嵌套 flex 布局强行“折弯”——破坏网格流，响应式断点时错位更严重
grid-template-areas 适合静态结构，但要慎用命名碎片
它能提升可读性，但名字一旦和视觉强绑定（如 "orange-l-top orange-l-side white-hole blue-corner"），后续改设计就得同步改 HTML class、CSS 名字、JS 选择器三处，维护成本陡增。更适合用数字坐标定位 + class 语义组合。
推荐做法：
- 定义固定列数：比如
grid-template-columns: repeat(6, 1fr)，把整行划为 6 等份，便于精细控制宽高比 - 用
grid-column: 1 / 4表示占前 3 格，grid-row: 1 / 3表示跨 2 行，避免命名区域 - 关键模块加语义 class，如
class="hero-primary"、class="stat-card"，而非class="area-2-3"
响应式断点不是简单缩放，而是重构网格拓扑
Bento 布局在移动端几乎必然退化为单列，但“退化”不等于“塌陷”。很多团队直接写 @media (max-width: 768px) { grid-template-columns: 1fr; }，结果所有卡片堆成一根柱子，顶部大图失去冲击力。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
更合理的断点策略：
- 桌面端（≥1024px）：6 列基线，
hero-primary占grid-column: 1 / 5; grid-row: 1 / 3，右侧两个小模块并排 - 平板（768–1023px）：改为 4 列，
hero-primary缩为1 / 5（即满宽），下方模块转为 2×2 网格 - 手机（hero-primary 加
grid-row: 1保证它永远在最顶，其余模块按语义顺序自然流式排列
性能提示：避免在每个断点重复写全部 grid-column/grid-row，用类名切换更轻量，例如：<div class="hero-primary md:col-span-4 lg:col-span-3">（配合 Tailwind 或自定义 utility class）。
<h3>gap 和 padding 的边界归属必须明确</h3>
<p>营销页常需“紧贴边缘”的视觉张力，但 <code>gap 是网格容器属性，作用于所有项目之间；而 padding 属于单个项目。混淆会导致空白位置不可控。
典型陷阱：
- 设了
gap: 1.5rem，又给每个卡片加margin: 1rem——实际间距变成 2.5rem，且首尾多出额外空白 - 用
gap控制卡片间距，却忘了容器本身需要padding来预留内边距，结果最外侧卡片贴到视口边缘 - 在
grid-auto-rows固定高度时，gap会额外增加总高度，导致滚动条意外出现
建议统一用 gap 管理网格内间距，容器用 padding 控制内外边界，卡片内部用 padding 处理文字/图片呼吸感，三者职责不重叠。
真正难的不是写出第一版 Bento，而是当市场部凌晨发来新需求：“把右下角蓝色块换成带视频预览的横向滑动模块，并在 iPad 上让它横跨两行”——这时候你得清楚，那个 blue-corner 在 DOM 里到底是几个节点、哪些 class 控制它的行列跨度、哪些媒体查询会干扰它的定位。结构先行，样式后置，别让视觉妥协拖垮可维护性。
