display: grid 是最直白的模块化栅格系统实现方式，天然支持二维布局，一行 CSS 即可定义行列结构，优于 float、百分比和冗余 media query。
直接用 display: grid 定义容器，别绕弯子
想快速搭出模块化栅格系统，display: grid 是最直白的路径。它天然支持二维布局，一行 CSS 就能声明行列结构，不用嵌套 float、计算百分比宽度或写一堆 media query 临时补救。
常见错误是死磕 grid-template-areas：写一长串字符串映射，改一个区域名就得同步更新所有相关 grid-area 值，还无法动态插入新模块。实际项目里更稳的方式是线性定义列宽 + 显式控制子项位置。
-
grid-template-columns: 240px 1fr 320px—— 左侧导航固定宽、主内容弹性伸缩、右侧广告栏定宽，语义清晰，后续加@media切单列也容易 - 用
gap替代子元素margin控制间距，避免 margin 合并问题 - IE11 不支持 Grid（加前缀也不行），若需兼容，得 fallback 到 Flexbox 或 JS 补丁，不能假装它存在
auto-fit + minmax() 实现响应式自动列数
做卡片列表、产品展示这类“数量不确定+宽度自适应”的场景，硬写死列数（如 repeat(3, 1fr)）会卡死在特定屏幕尺寸。正确做法是让列数随容器宽度自动增减。
关键组合：grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))。这句的意思是：每列最小 280px，最大占满剩余空间；只要容器够宽，就尽可能多塞列，不够就折行。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别用
auto-fill——它会渲染空白列，浪费 DOM 节点 -
minmax()第一个参数不能为0，否则某些浏览器（如旧版 Safari）可能忽略整条规则 - 配合
justify-content: center可让不足一行的项居中，而不是左对齐堆一起
语义标签 + Grid 容器混用，不冲突
<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这些 HTML5 语义标签不是装饰品，它们和 Grid 完全兼容。你完全可以把 <main></main> 设为 Grid 容器，内部再用 section 做栅格子项。
错误做法是为每个语义标签单独写一套 flex/grid 规则，导致样式碎片化。推荐结构：
- 外层
body或包裹div设为 Grid 容器，用grid-template-rows和grid-template-columns划分大区（比如 header-main-footer 垂直流） -
<main></main>内部再设一层 Grid，负责内容区块的栅格排列（如三列文章摘要） - 避免把
<header></header>或<nav></nav>本身设成 Grid 容器去排按钮——那是flex的活，Grid 在这里过度了
iframe 嵌入模块时，注意跨域与高度同步
当模块真要物理隔离（比如不同团队独立部署、第三方广告、遗留系统嵌入），iframe 是唯一选择。但它不是“设个 src 就完事”。
典型问题：iframe 内容高度变化，父页不跟着撑开，出现滚动条嵌套或底部留白。
- 不要依赖
height: 100%——iframe 高度默认是 150px，且不继承父容器高度 - 跨域 iframe 无法通过 JS 读取其
document.body.scrollHeight，得靠postMessage主动通知父页调整高度 - 同域下可用
iframe.onload = () => iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px'，但要防重复触发 -
name属性别漏设——表单提交目标、锚点跳转都靠它定位
真正复杂的不是怎么写 Grid，而是决定什么时候不该用 Grid——比如纯垂直滚动列表、简单导航栏、需要 SEO 深度索引的内容区块，语义标签 + 基础 Flex 就足够，强行套 Grid 反而增加维护成本。
