With Html/css How Does One Overlay/position A Rect On An Existing Html Grid As Per My Diagram

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,

Solution 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

<divclassName="wrapper"><divclassName="box box1">Item 1</div><divclassName="box box2">Item 2</div><divclassName="box box3">Item 3</div><divclassName="box box4">Item 4</div><divclassName="box box5">Item 5</div><divclassName="box box6">Item 6</div><divclassName="box box7">Item 7</div><divclassName="box box8">Item 8</div><divclassName="box box9">Item 9</div><divclassName="span span1">Blue span 1</div><divclassName="span span2">Blue span 1</div><divclassName="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;
}

Solution 2:

Since you want a given position in the grid to be shared by 2 different elements, you need to set specific positions for both elements.

Setting the position for the blue rectangles is straighforward. Setting the positions for the items in a generic way is a little bit more hard.

I have set this in such a generic way, but if you find the selectors too hard, you can always set the grid positions 1 by 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;
}

<divclass="wrapper"><divclass="box">Item 1</div><divclass="box">Item 2</div><divclass="box">Item 3</div><divclass="box">Item 4</div><divclass="box">Item 5</div><divclass="box">Item 6</div><divclass="box">Item 7</div><divclass="box">Item 8</div><divclass="box">Item 9</div><divclass="overlay"id="ov1">Blue overlay</div><divclass="overlay"id="ov2">Blue overlay</div></div>