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），想让一个元素横跨前两列：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
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 是非法语法，整条规则会被浏览器忽略。
跨行+跨列一起控制
二维跨越只需同时设置 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; - 命名区域本身已隐含跨格逻辑，无需手动算线号，可读性和维护性更高
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
