媒体查询中CSS Grid出现双倍间隙与布局不居中问题求助

问题场景 #

大屏视图下采用奇数数量的Grid单元格布局，通过媒体查询切换为偶数数量单元格后，出现双倍间隙且布局不再居中。核心疑问：仅给需要省略的非空单元格设置内部内容display:none是否足够？

核心原因 #

只隐藏单元格内部内容完全不够。Grid布局中，单元格本身是Grid轨道的一部分，哪怕内部内容被隐藏，单元格元素依然会占据Grid分配的轨道空间。原本的奇数轨道结构没有被真正修改，多余的单元格轨道会留存下来，直接导致间隙翻倍、布局偏移。

解决方案 #

要彻底解决这个问题，需要同时修改Grid的轨道配置，让单元格元素真正脱离Grid布局：

1. 同步修改Grid列数 + 隐藏目标单元格 #

在媒体查询中，先调整grid-template-columns为偶数列，再给需要省略的单元格设置display:none（彻底移除元素，不占空间）。

修正后代码示例

HTML：

<div class="grid-container">
  <div class="grid-item">项目1</div>
  <div class="grid-item">项目2</div>
  <div class="grid-item">项目3</div>
  <div class="grid-item">项目4</div>
  <div class="grid-item grid-item--extra">项目5</div>
</div>

CSS：

.grid-container {
  display: grid;
  /* 大屏奇数列 */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-item {
  padding: 2rem;
  background-color: #eee;
}

@media (max-width: 768px) {
  /* 小屏切换为偶数列 */
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 彻底隐藏多余单元格，不占Grid轨道空间 */
  .grid-item--extra {
    display: none;
  }
}

2. 动态调整单元格的Grid占位 #

如果需要保留单元格元素（比如后续要恢复显示），可以通过修改grid-column或grid-row属性，让剩余单元格重新填充轨道，同时隐藏多余单元格的内容：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-item--extra {
    visibility: hidden;
    /* 让单元格不占据有效轨道 */
    grid-column: 1 / -1;
    height: 0;
    padding: 0;
  }
}

关键提醒 #

• display:none：元素完全脱离文档流，不占据任何Grid空间，是解决此类问题的最直接方式。
• visibility:hidden/仅隐藏内部内容：元素仍会占据Grid轨道空间，会导致布局残留问题，不建议使用。

内容的提问来源于stack exchange，提问作者AndyWizz