如何隐藏网格的特定部分？

Question

我想要做的是创建并使所有网格都存在，但隐藏其中的一部分。它可能看起来有点令人困惑，但让我解释一下：

这是一个包含4行和182列的网格。它以天为单位显示半年，以及项目的示例流程。我想要获得的是，仅显示网格的特定部分（在示例中为第四个月的日期），但隐藏部分只是隐藏的方式，但它们仍然存在。为了更好地理解，我想要的结果是这样的：显示从120到150的网格列，以及从1到4的行，所以只能从网格中看到这个区域。

Answer 1

您可以使用2：pseudos覆盖网格容器的两侧，绝对定位。

➡️Codepen

Good start about Grid layout on MDN

.container {
  position: relative;
  display: grid;
  grid-template-rows: repeat(4, 5rem);
  grid-template-columns: repeat(25, 1fr);
  grid-gap: 0.25rem;
}

.item {
  display: flex;
    justify-content: center;
    align-items: center;
  background-color: aqua;
}

.container::before,
.container::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 100%, 50%, 0.7);
}

.container::before {
  grid-area: 1 / 1 / -1 / span 8;
}

.container::after {
  grid-area: 1 / 13 / -1 / -1;
}