С HTML / CSS как можно наложить / позиционировать Rect на существующей HTML-сетке согласно моей диаграмме

Question

Как добавить дополнительные элементы в существующую сетку, отметив требование, что они могут охватывать несколько ячеек?

Фон:

• Предполагается использование HTML5 и CSS3
• Сетка, созданная с использованием div, форматирование с использованием CSS "Сетка"
• Сетка уже создана, поэтому вы хотите добавить дополнительные синие прямоугольники, наложенные визуально на сетку.Прямоугольники - это Div'ы с CSS-форматированием, чтобы они отображались в виде синего прямоугольника

Скажем, начните с HTML / CSS, как показано ниже.Какой дополнительный 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

Так как вы хотите, чтобы данная позиция в сетке была разделена между двумя различными элементами, вам необходимо установить конкретные позиции для обоих элементов.

Установка позиции для синих прямоугольников очень проста.Установка позиций для элементов в общем виде немного сложнее.

Я установил это таким общим образом, но если вы находите селекторы слишком жесткими, вы всегда можете установить позиции сетки 1 на 1.

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

.overlay {
   background-color: lightblue;
   height: 70px;
   margin-top: 30px;
   border-radius: 10px;
}
#ov1 {
   grid-column: 2 / span 2;
   grid-row: 1;
}
#ov2 {
   grid-column: 1 / span 2;
   grid-row: 2;
}

.box:nth-child(3n + 1) {
   grid-column: 1;
}
.box:nth-child(3n + 2) {
   grid-column: 2;
}
.box:nth-child(3n) {
   grid-column: 3;
}
.box:nth-child(-n + 3) {
   grid-row: 1;
   background-color: lightyellow;
}

.box:nth-child(-n + 6):nth-child(n + 4) {
   grid-row: 2;
   background-color: tomato;
}

<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" id="ov1">Blue overlay</div>
  <div class="overlay" id="ov2">Blue overlay</div>
</div>

Answer 2

Если у вас будет фиксированное количество ячеек (немного похоже на календарь), вы можете сделать что-то вроде следующего:

HTML

<div className="wrapper">
  <div className="box box1">Item 1</div>
  <div className="box box2">Item 2</div>
  <div className="box box3">Item 3</div>
  <div className="box box4">Item 4</div>
  <div className="box box5">Item 5</div>
  <div className="box box6">Item 6</div>
  <div className="box box7">Item 7</div>
  <div className="box box8">Item 8</div>
  <div className="box box9">Item 9</div>

  <div className="span span1">Blue span 1</div>
  <div className="span span2">Blue span 1</div>
  <div className="span span3">Blue span 1</div>
</div>

CSS

.wrapper {
  grid-template-columns: [column1] 1fr [column2] 1fr [column3] 1fr;
  grid-template-rows: [row1] auto [row2] auto [row3] auto;

  display: grid;
}

.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

.span1 {
  grid-column: column2 / span 2;
  grid-row: row1;
}

.span2 {
  grid-column: column1 / span 3;
  grid-row: row2;
}

.span3 {
  grid-column: column3;
  grid-row: row3;
}