CSS Grid 是现代栅格系统正确起点，应避免 float/inline-block 及 Bootstrap 类名式写法；用 grid-template-columns、grid-template-areas、gap 和媒体查询实现语义化响应式布局，慎用隐式网格与 dense 模式。
用 CSS Grid 实现栅格系统，别碰 float 和 inline-block
原生 display: grid 就是现代栅格的正确起点，不用封装一堆 row / col 类名也能做响应式布局。强行套用 Bootstrap 那套 class 命名（比如 .row、.col-6）反而掩盖了 Grid 的弹性本质，还容易在嵌套时触发隐式网格（implicit grid），导致列宽错乱。
真正要做的，是把容器设为 grid，用 grid-template-columns 控制列数与宽度，用 gap 代替负 margin 模拟 gutter——所有逻辑都在 CSS 里，HTML 纯语义化：
<div class="grid"> <aside>侧边栏</aside> <main>主内容</main> <footer>页脚</footer> </div>
对应 CSS 只需几行：
.grid {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-areas: "sidebar main"
"sidebar footer";
gap: 1rem;
}
.grid > aside { grid-area: sidebar; }
.grid > main { grid-area: main; }
.grid > footer { grid-area: footer; }响应式断点必须用 @media 而非 class 切换
写 .col-md-8 这类 class 是对 Grid 的降级使用。Grid 天然支持在媒体查询中重定义 grid-template-columns，这才是语义清晰、维护成本低的做法。
立即学习“前端免费学习笔记（深入）”；
- 移动端优先：默认单列
grid-template-columns: 1fr - 平板加个断点：
@media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } - 桌面再加一层：
@media (min-width: 1024px) { .grid { grid-template-columns: 200px 1fr 300px; } }
注意：不要用 max-width 写断点，容易和容器宽度冲突；也不要给每个断点都写完整 grid-template-areas，只在结构变化大时才重定义。
grid-column 和 grid-row 是跨列/跨行的唯一可靠方式
想让某个元素占两列？别用 colspan 思维去加 class，直接用 grid-column：
<header>标题</header> <article>正文</article> <aside>广告</aside>
配合 CSS：
.grid {
display: grid;
grid-template-columns: 1fr 300px;
}
.grid > header { grid-column: 1 / -1; } /* 从第1列到最后一列 */
.grid > article { grid-column: 1; }
.grid > aside { grid-column: 2; }常见错误：
- 写成
grid-column: 1 / 3却没定义第3列轨道 → 触发隐式网格，宽度不可控 - 用
span 2但父容器只有 1 列轨道 → 表现等同于1 / -1，但语义模糊 - 在 flex 容器里嵌套 grid 并期望
grid-column生效 → 不生效，grid 属性只对直系子元素起作用
避免用 grid-auto-flow: dense 解决“空洞”问题
当某些格子内容为空、又用了 grid-area 占位时，其他项目可能被挤到后面，出现视觉空洞。这时候有人会加 grid-auto-flow: dense 让 Grid 自动填空——但这是饮鸩止渴。
根本原因通常是：
- HTML 结构顺序和视觉顺序不一致，却没用
order调整（Grid 中order仍有效） - 用
grid-area强行定位，但没配齐所有区域，漏写了某块grid-area值 - 响应式下某区域被
display: none掉，但其他元素仍按原grid-area占位 → 应该用visibility: hidden或 JS 移除元素
真正健壮的做法：保持 HTML 流式顺序，靠 grid-template-areas + 媒体查询重排，而不是靠 dense 去“打补丁”。
复杂点在于，Grid 的隐式轨道、自动定位和媒体查询叠加后，行为不容易肉眼预测。调试时打开浏览器的 Grid Inspector（Chrome/Firefox 开发者工具里勾选 “Show grid areas”），比反复改 class 有效得多。
