零基础学会HTML圣杯布局核心代码-html教程-PHP中文网

grid 实现圣杯布局更优，因 grid-template-areas 语义清晰、seo 友好、无需 hack；float + margin-left: -100% 易塌陷、兼容性差、维护难、响应式成本高。

零基础学会html圣杯布局核心代码

用 Grid 实现圣杯布局，display: grid + grid-template-areas 就够了，不用浮动、不写负 margin、DOM 顺序天然符合 SEO 要求。

为什么不能直接用 `float` + `margin-left: -100%`？

这套老方案依赖文档流错位和视觉还原的精细配合，稍一出错就塌陷或错位，且必须加 overflow: hidden 或其他 BFC 触发方式防容器高度塌陷；IE8– 兼容性差，box-sizing 不统一时宽度计算极易翻车；移动端响应式要重写整套逻辑。

margin-left: -100% 是相对父容器宽度计算，但若父容器没设宽（比如 min-width 没配），窄屏下侧栏直接被拉出视口
padding-left 和 margin-left: -100% 必须严格匹配，改一个值就得同步调另一个，维护成本高
所有子元素都 float，后续新增元素容易意外参与浮动流，得反复加 clear

`grid-template-areas` 写法最稳，三步到位

语义清晰、调试直观、增删区域不影响整体结构。关键不是“怎么写”，而是“为什么这样写”：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

grid-template-areas 每行字符串必须用引号包裹，且单词数与 grid-template-columns 列数一致，比如三列就写三个单词："header header header"
main 对应的 grid-area: main 必须写在 HTML 中第一个子元素位置，否则 SEO 和可访问性受损
左右列用固定单位（如 200px、15rem），中间用 1fr，不能写 auto 或百分比，否则无法撑满剩余空间

示例：

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

用 `grid-column` 手动定位时最容易踩的坑

不靠命名区域，靠线号控制更灵活，但也更容易静默失效——浏览器不报错，只让元素消失。

三列定义下，总共有 4 条网格线（1→2→3→4），nav { grid-column: 1 / 2 } 表示从第 1 条线开始、到第 2 条线结束，占第一列
grid-column: 2 是简写，等价于 2 / 3，不是“只占第 2 条线”，而是占第二列；误以为是线号本身会导致定位偏移
写了 grid-column: 4 / 5 但只有 3 列？该元素不会报错，也不会渲染——它超出了网格范围，被丢弃
如果某列内容高度不够，1fr 仍会按剩余空间分配，但 grid-row 不显式设置时，元素不会自动跨行填满，需配合 min-height 或内容撑高