display: none 是唯一能真正“释放轨道”的隐藏方式，visibility: hidden 或 opacity: 0 仍参与布局计算、占位并影响 grid-column 分配；只有 display: none 让元素彻底退出网格项列表，Grid 引擎才重新分配剩余项位置。
display: none 是唯一能真正“释放轨道”的隐藏方式
用 visibility: hidden 或 opacity: 0 隐藏网格项，它仍参与布局计算：占位、影响 grid-column 分配、触发重排，JS 测量（如 getBoundingClientRect()）也返回真实尺寸。只有 display: none 会让该元素彻底退出网格项列表，Grid 引擎才会重新分配剩余项的位置。
但注意：display: none 后，该元素上所有 grid-column、grid-row 声明全部失效，也不会再占用任何轨道——这既是优势，也是后续补位逻辑的前提。
- 别在隐藏项上保留
grid-column: 1 / -1之类声明，它已无意义 - 如果该网格项内含定时器、IntersectionObserver 或地图实例，
display: none不会自动销毁，需 JS 主动清理 - 媒体查询中写
@media (max-width: 768px) { .status { display: none; } }却不生效？先检查断点是否命中、CSS 优先级是否被覆盖
grid-auto-flow: dense 只对“未显式定位”的项生效
grid-auto-flow: dense 不是万能补位开关。它只在自动放置（auto-placement）阶段起作用，也就是当子元素**没写** grid-row、grid-column 或 grid-area 时，才可能把后续项塞进前面腾出的空格子里。
一旦你给所有子项都指定了位置，dense 就完全静默——它不会移动已有定位项，也不会生成新行/列来填补视觉空白。
立即学习“前端免费学习笔记（深入）”；
- 显式写了
grid-column: 2的项被display: none后，后面那个grid-column: 3的项不会自动变成2 - 用了
grid-template-areas的布局，dense无效——区域模板已固化 - 只设了
grid-template-columns没配grid-auto-rows，隐式行轨道不存在，dense无格可填
想让可见项“接管”被隐藏项的列空间，得手动指定 grid-column: span N
当隐藏第一个网格项后，希望第二个项撑满整行（比如两列布局），不能指望 Grid 自动调整，必须显式告诉它：“你得跨两列”。关键就是 grid-column: span 2——这里的 2 指跨越 **2 个网格轨道**，不是 2 条线，也不是“跳过第 1 列”。
例如 grid-template-columns: min-content auto 定义了两列，隐藏第 1 项后，第 2 项要维持原宽度，就得加：
.grid.hide-first .two { grid-column: span 2; }若列数变成 repeat(3, 1fr)，就要同步改成 span 3；否则它只会跨 2 列，右侧仍留空。
- 用相邻兄弟选择器（如
.one + .two）可避免硬编码类名，更易维护 -
span N必须写在**可见项**上，不是隐藏项上 - 如果网格项是嵌套 Flex 容器，它的直接子元素也可能需要
min-width: 0才能真正收缩
响应式场景下按宽度阈值动态隐藏，JS 控制比纯 CSS 更可靠
纯 CSS 很难实现“宽度
推荐用 JS 监听输入或 resize，并切换 nth-child() 对应项的 display：
const container = document.querySelector('.grid-container');
function updateVisibility(widthPercent) {
const item3 = container.children[2]; // 第 3 项（索引 2）
const item4 = container.children[3]; // 第 4 项
item4.style.display = widthPercent < 50 ? 'none' : '';
item3.style.display = widthPercent < 25 ? 'none' : '';
}同时确保所有网格项都带 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;，否则隐藏后文本不会自动截断。
最易被忽略的一点：中文、日文等无空格语言下，即使加了 text-overflow: ellipsis，长串仍可能不截断——这不是 Grid 问题，而是浏览器对“单词边界”的判定逻辑导致的，需额外加 word-break: break-all 或 overflow-wrap: break-word 辅助。
