With HTML/CSS how does one overlay/position a Rect on an existing HTML grid as per my diagram

Question

How does one add additional elements to an existing grid, noting the requirement is they may span multiple cells?

Background:

• Assume using HTML5 and CSS3
• Grid created using div's, formatting using CSS "Grid"
• Grid is already created so want to add the additional blue rectangles overlaid visually onto the grid. The rectangles being Div's with CSS formatting to show them as a blue rectangle

Say start off with HTML/CSS per below. What additional HTML/CSS to add say the first blue rectangle in the first row:

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

If you're going to have a fixed number of cells (a bit like a calendar) you could do something like the below:

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