HTML5 Grid子元素跨单元格需指定起止线而非拉宽，须先定义grid-template-columns/rows创建轨道线；常用写法有grid-column:1/3、1/span2、span2；二维跨越用grid-area:2/1/4/3；命名区域用grid-template-areas提升可读性。

要让 HTML5 中 Grid 布局的子元素跨越多个单元格，关键不是“拉宽它”，而是**告诉浏览器：这个元素从哪条线开始、到哪条线结束**。Grid 的本质是基于“线”（grid lines）的定位系统，列与行之间由线分割，编号从 1 开始——3 列就有 4 条竖线（1–4），3 行就有 4 条横线（1–4）。

必须先定义网格轨道

如果父容器只写了 display: grid，但没设 grid-template-columns 或 grid-template-rows，那浏览器连“一列在哪”都不知道，span 2 就会静默失效或退化为占 1 格。

• 正确写法示例：grid-template-columns: 1fr 1fr 1fr;（生成 3 列，共 4 条列线）
• 用 repeat(3, 1fr) 或 minmax(300px, 1fr) 也行，只要显式声明了列结构
• grid-auto-flow: column 不等于定义列——它只改变自动放置方向，不创建轨道线

跨列的三种常用写法

假设已有 3 列（即列线为 1–4），想让一个元素横跨前两列：

• grid-column: 1 / 3; —— 从第 1 条列线开始，到第 3 条列线结束（覆盖第 1、2 列）
• grid-column: 1 / span 2; —— 从第 1 条线开始，向右跨 2 条轨道（效果同上，更语义化）
• grid-column: span 2; —— 不指定起点，由 Grid 自动找第一个空位；适合流式卡片，但位置不可控

⚠️ 注意：grid-column: span 2 / 4 是非法语法，整条规则会被浏览器忽略。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

立即学习“前端免费学习笔记（深入）”；

跨行+跨列一起控制

二维跨越只需同时设置 grid-row 和 grid-column：

• grid-row: 2 / 4; + grid-column: 1 / 3; → 占据第 2–3 行、第 1–2 列共 4 个单元格
• 等价简写：grid-area: 2 / 1 / 4 / 3;（顺序：row-start / col-start / row-end / col-end）
• 支持负值：grid-column: -3 / -1; 在 3 列布局中 = 1 / 3，更适应响应式变化

命名区域让跨格更直观

对固定模块（如 header、sidebar、main），推荐用 grid-template-areas：

• 父容器写：grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
• 子元素写：grid-area: header; 或 grid-area: main;
• 命名区域本身已隐含跨格逻辑，无需手动算线号，可读性和维护性更高