CSS Grid 是原生 CSS 模块而非 HTML5 内置“系统”，需显式设 display: grid，用 grid-template-columns/rows 定义轨道，fr 和 minmax 更可靠，grid-column/row 控制跨格，响应式推荐 auto-fit + minmax，失效主因是父容器未设 display: grid 或宽高。
Grid 布局不是“系统”，而是原生 CSS 模块
HTML5 本身没有叫“网格系统”的内置功能，grid 是 CSS Grid Layout（CSS 网格布局）模块，属于 CSS3 规范，但被现代浏览器在 HTML5 语境下广泛支持。所谓“HTML5 网格系统”其实是误称——你真正要学的是 display: grid 及其配套属性，不是引入某个库或框架。
别被“系统”二字带偏：它不依赖 Bootstrap 或 Tailwind，也不需要 npm install，直接写 CSS 就生效。
从 display: grid 开始，两步搭出基础网格
网格容器必须显式声明 display: grid 或 display: inline-grid，否则所有网格属性无效。子元素（网格项）自动成为网格成员，无需额外 class 或标签。
-
grid-template-columns和grid-template-rows定义轨道尺寸，比如grid-template-columns: 1fr 2fr auto - 列宽用
fr（fraction）比用px或%更可靠，避免因边框/间距导致溢出 - 行高建议用
minmax(100px, auto)而非固定值，兼顾内容撑开与最小高度
div.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
div.container > div {
background: #eee;
}
grid-column 和 grid-row 控制跨格，别硬套“12 列”思维
CSS Grid 天然支持任意列数和不规则跨越，不需要预设 12 列栅格。用 grid-column: 1 / -1 让某项横跨全部列，比写 col-span-12 更直接。
立即学习“前端免费学习笔记（深入）”；
一、源码描述这是一款比较简单的企业管理系统源码，界面美观大方，功能简单，特别适合初学者学习研究，系统运行十分流畅，可以作为二次开发，同时也是可以帮助初学者增长知识的优秀代码。二、功能介绍主要功能：企业动态，产品介绍 ,免费下载，定制服务，该源码比较适合新手学习和二次开发使用。三、源码特点1、网站布局：采用目前最先进的布局方式DIV+CSS，符合W3C的标准和Web2.0的风格。2、程序设计模块化，
-
grid-column: 2 / 4表示从第 2 条线开始，到第 4 条线结束（即跨 2 列） -
grid-row: span 2等价于grid-row: auto / span 2，更简洁 - 避免混用
grid-area和单独的grid-column+grid-row，容易覆盖冲突 - 响应式时优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))))，而非媒体查询硬切列数
常见失效原因：父容器没设宽高 or 忘了 display: grid
最常遇到“网格不生效”，90% 是因为：
- 父元素没加
display: grid，只写了子项的grid-column—— 这些属性在非网格容器里完全被忽略 - 父容器宽度为
0或未设置（比如div在文档流中无内容、无 height、无 border），导致网格轨道塌陷 - 用了
float或inline类样式干扰文档流，Grid 不吃这套 - 在 Flex 容器里嵌套 Grid 容器没问题，但反过来把 Grid 当 Flex 用（比如只设
justify-content）不会生效
调试时打开浏览器开发者工具，检查父元素 computed 样式里是否有 display: grid，以及 grid-template-columns 是否解析为有效值。空值或 none 就说明写法有误。
Grid 的灵活在于它不强制结构约束，但这也意味着错误更隐蔽——写错一行属性，整个布局就静默失败，不像浮动那样至少还能堆叠出来。
