Как разместить «оверлейный прямоугольник» в HTML CSS Grid, но сместить горизонтально от границ столбцов?(согласно моему изображению)

Question

Как разместить «оверлейный прямоугольник» в HTML CSS Grid, но сместить горизонтально от границ столбцов?(согласно моему изображению)

Фон:

• Предполагается использование HTML5 и CSS3
• Сетка, созданная с использованием div, форматирование с использованием CSS "Сетка"
• Сетка уже создана, поэтому вы хотите добавить дополнительные синие прямоугольники, наложенные визуально на сетку.Прямоугольники - это Div'ы с CSS-форматированием, чтобы они отображались в виде синего прямоугольника
• Допустим, синий прямоугольник должен начинаться на 20% в ячейку Item5 и заканчиваться на 50% в ячейке Item6, например
• [Я действительно получил хороший ответ здесь С HTML / CSS, как можно наложить / позиционировать объект Rect на существующей HTML-сетке согласно моей диаграмме , однако пренебречь, чтобы подчеркнуть необходимость того, чтобы у меня также было смещение]

Начните с HTML / CSS ниже.

HTML

<div className="wrapper">
  <div className="box">Item 1</div>
  <div className="box">Item 2</div>
  <div className="box">Item 3</div>
  <div className="box">Item 4</div>
  <div className="box">Item 5</div>
  <div className="box">Item 6</div>
  <div className="box">Item 7</div>
  <div className="box">Item 8</div>
  <div className="box">Item 9</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

Answer 1

Вы можете рассмотреть псевдоэлемент, как показано ниже:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}
.overlay {
  position:relative;
}
.overlay:before {
  content:"overlay";
  position:absolute;
  left:20%;
  right:-50%;
  top:30px;
  bottom:30px;
  background:blue;
}

<div class="wrapper">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box overlay">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
</div>

Если вам нужно использовать элемент div, вы можете сделать то же самое, но вы настраиваете верхнюю / левую / правую часть, рассматривая контейнер как эталон

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  
  position:relative;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}
.overlay {
  position:absolute;
  left:calc(33% + 0.2 * 33%);
  right:calc(0.5 * 33%);
  top:calc(33% + 30px);
  height:80px;
  background:blue;
}

<div class="wrapper">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
  
  
  <div class="overlay">oevrlay</div>
</div>