Как скрыть определенные части сетки?

Question

Что я хочу сделать, так это создать и сделать всю сетку существующей, но скрыть ее часть.Это может показаться немного запутанным, но позвольте мне объяснить:

Вот таблица с 4 строками и 182 столбцами.Он показывает пол года в днях, а для примера процессы проектов.Я хочу заработать, чтобы показать только определенную часть (в примере дни четвертого месяца) сетки, но таким образом, что скрытые части просто скрыты, но они остаются существующими.Для лучшего понимания, результат, который я хочу получить, выглядит примерно так: покажите столбцы сетки от 120 до 150 и строки от 1 до 4, поэтому сделайте только эту область видимой из сетки.

Answer 1

Вы можете покрыть обе стороны вашего контейнера сетки с его 2: псевдо, абсолютно позиционированными.

➡️ Codepen

Хорошее начало о макете сетки на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;
}