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

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;
}