如何隐藏网格（Grid）特定区域且保留网格完整结构？

嘿，我完全get到你的需求了——要保留完整的4行182列网格结构，但只展示第1-4行、120-150列的区域，其余区域虽然看不见但得留在网格里对吧？下面给你几种实用的实现方案，适配不同的技术场景：

这种方式不需要写脚本，直接用CSS就能搞定，而且完美保留网格的布局结构。核心是用visibility: hidden（它会隐藏元素但保留其占据的空间，正好符合你的要求，不像display: none会破坏网格）。

如果是HTML表格 #

给需要隐藏的列的所有单元格添加类名（比如.hidden-col），然后写CSS：

.hidden-col {
  visibility: hidden;
}

你只需要给第1-119列和151-182列的单元格加上这个类就行。

如果是CSS Grid布局 #

假设你的网格容器是.grid-container，每个网格项是.grid-item，且采用行优先排列（默认就是行优先），可以用nth-child选择器精准定位要隐藏的项：

/* 隐藏第1-119列的所有行，以及第151-182列的所有行 */
.grid-item:nth-child(-n+119),
.grid-item:nth-child(n+151):nth-child(-n+728) { 
  /* 4行×182列=728个总项，第151列开始的项索引是151到728 */
  visibility: hidden;
}

如果后续需要动态调整显示的区域，用JS来控制会更灵活。思路是遍历所有网格项，根据行列位置判断是否隐藏：

// 获取所有网格元素
const gridItems = document.querySelectorAll('.grid-item');

gridItems.forEach((item, index) => {
  // 计算当前项所在的列和行（行优先排列）
  const totalCols = 182;
  const col = index % totalCols + 1;
  const row = Math.floor(index / totalCols) + 1;
  
  // 只显示目标区域：1-4行，120-150列
  if (row >= 1 && row <= 4 && col >= 120 && col <= 150) {
    item.style.visibility = 'visible';
  } else {
    item.style.visibility = 'hidden';
  }
});

如果你用React、Vue这类框架，可以在渲染网格时直接判断每个项是否需要显示：

function DateGrid() {
  const totalRows = 4;
  const totalCols = 182;

  return (
    <div className="grid-container">
      {Array.from({ length: totalRows * totalCols }).map((_, index) => {
        const col = index % totalCols + 1;
        const row = Math.floor(index / totalCols) + 1;
        // 判断是否在可见区域内
        const isVisible = row >=1 && row <=4 && col >=120 && col <=150;

        return (
          <div
            key={index}
            className={`grid-item ${isVisible ? '' : 'hidden-item'}`}
          >
            {/* 这里放你的日期或流程内容 */}
          </div>
        );
      })}
    </div>
  );
}

对应的CSS还是：

.hidden-item {
  visibility: hidden;
}

小提示 #

一定要用visibility: hidden而不是display: none，因为后者会把元素从布局中移除，导致网格的结构被破坏，而前者会完整保留网格的行高、列宽，只是让元素不可见，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Gergő Horváth