Grid Formatting Context（GFC）是CSS Grid布局中由display: grid或inline-grid触发的网格格式化上下文，非HTML5定义；仅此两值可创建GFC，且grid-template-*系列属性仅在此上下文中生效。
什么是 Grid Formatting Context（GFC）？
HTML5 本身不定义“GFC”这个术语——它是 CSS Grid 布局中 display: grid 或 display: inline-grid 触发的**网格格式化上下文**（Grid Formatting Context），属于 CSS 规范范畴，不是 HTML5 的功能。所谓“GFC 布局技巧”，实际是指如何正确启用并控制 CSS Grid 容器的行为。
怎样触发真正的 GFC？关键看 display 值
只有设为 grid 或 inline-grid 才创建 GFC；其他值如 block、flex、table 都不会。常见误操作是只写 grid-template-columns 却漏掉 display: grid，此时样式完全不生效。
-
display: grid：生成块级网格容器 -
display: inline-grid：生成行内级网格容器（宽度由内容撑开） -
display: subgrid：仅用于子网格，且父容器必须已是 GFC -
display: grid !important可能被 Shadow DOM 或框架样式覆盖，需检查层叠顺序
grid-template-* 系列属性必须配合 GFC 使用
像 grid-template-columns、grid-template-rows、grid-template-areas 这些属性，**只在 GFC 中有意义**。在普通 block 容器里声明它们会被浏览器忽略（无报错，但无效）。
.container {
display: grid; /* 必须先有这行 */
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}注意：grid-template-areas 中每个引号内单词数必须等于 grid-template-columns 定义的列数，否则整行声明失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的 GFC 边界行为
GFC 会切断常规文档流和某些继承链，带来几个隐蔽但关键的影响：
- 子元素的
float、vertical-align、clear全部失效 -
margin-collapse（外边距合并）在 GFC 内部不发生 - 子项的
width: 100%是相对于网格轨道（track），不是父容器可视宽，容易误解尺寸 - 用
grid-column: span 2跨列时，若目标列被grid-auto-flow: column动态生成，行为可能不符合直觉
最常踩的坑：把一个已设 display: grid 的容器又套了一层 flex 布局，结果 Grid 子项不再受 Grid 控制——因为父容器不再是 GFC 根节点，而是 Flex 容器的子项。
