嘿，刚上手CSS Grid就直接原生写，这个思路超赞！针对你说的桌面3列、移动端某一行只显示2列（隐藏一个项）的需求，咱们来聊聊display: none是不是最佳选择，以及其他替代方案：

首先：display: none到底行不行？ #

答案是完全可以用，而且是最直接的方案之一：

• 它简单易懂，代码量少，浏览器兼容性拉满（所有支持CSS Grid的浏览器都支持）
• 被设置display: none的元素会被浏览器完全跳过渲染，不会占用布局空间，性能上没毛病
• 如果你在移动端完全不需要这个元素的存在（包括语义层面，比如这个内容对移动端用户没用），那这就是个非常合理的选择

不过它也有个小局限：如果之后需要用JS操作这个隐藏的元素，或者希望屏幕阅读器能读取到它（虽然这种场景在你需求里不太可能），那display: none就不太合适了，因为它会让元素脱离正常的DOM流，屏幕阅读器也会忽略它。

更优雅的CSS Grid专属方案 #

如果想尽量贴合Grid的布局逻辑，不用display: none也能实现：

方案1：调整列数+隐藏布局占位 #

在桌面端定义3列布局：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

在移动端媒体查询里，把列数改成2列，同时给要隐藏的网格项移除占位空间并视觉隐藏：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-item-to-hide {
    grid-column: 1 / -1;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
  }
}

不过这个方案比display:none繁琐，除非你有保留DOM的需求，否则没必要。

方案2：使用visibility: collapse #

这个属性是专门为表格和网格设计的，当用在网格项上时，它会让元素消失，同时网格会自动重新布局（和display:none视觉效果类似），但元素依然留在DOM里：

@media (max-width: 768px) {
  .grid-item-to-hide {
    visibility: collapse;
  }
}

不过要注意，部分旧版浏览器对这个属性的支持不太一致，如果你只针对现代浏览器，这个方案也可以考虑，但display:none的兼容性还是更稳妥。

总结 #

• 如果移动端完全不需要这个元素（内容对移动端用户无意义），display: none就是最佳实践，简单高效，没毛病
• 如果需要保留元素在DOM中（比如后续JS操作、屏幕阅读器需求），再考虑visibility: collapse或者隐藏布局的方案

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