Placing items in a grid layout with arbitrary width, but defined span - html

Question

I'm having difficulty finding the right technology/technique to display my layout. See picture:
Desired layout picture
This layout is similar to a calendar. An example cell is denoted in blue. The challenging part for me is a cell may have a child element that should span multiple cells/columns. The width of the calendar is full width, so each cell is of dynamic width.
I was originally using an HTML table but found that to be inflexible, so I have started using CSS Grid. With CSS Grid I still don't appear to be able to accomplish the desired layout. It looks like only direct child elements of the grid-container can be placed into the grid (in my case, these are cells). I desire the child elements of the cells to also be placed throughout the grid. This appears somewhat supported using "display: contents", but this is not support on all browsers, such as IE and Edge. I also see mention of CSS subgrid specification, but that doesn't appear to be available/supported yet.
Are there any other layout techniques or strategies which should allow for my desired layout design?
Edit: Here is a fiddle: https://jsfiddle.net/sy70c2j6/1683. I'd like some sort of styling to be able to specify that span2 and span3 span across 2 or 3 cells respectively.
// This doesn't accomplish it, but I desire something like this
.span2 {
grid-column: span 2;
}

Answer 1

You could kinda do this with grid-layout. You could create rows and for each row draw a line with :after pseudo-element. And you could also create columns with absolute positioned elements. Then in each row you can create cells that can span on multiple columns.
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
position: relative;
}
.row {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 20px;
grid-column: span 7;
position: relative;
}
.cols {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
display: grid;
grid-template-columns: repeat(7, 1fr);
z-index: -1;
grid-gap: 20px;
}
.cols > div {
border-left: 1px solid black;
grid-column: span;
}
.row:after {
content: '';
border-bottom: 1px solid black;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
body {
padding: 0;
margin: 0;
}
.cell {
border: 1px solid #8EBA75;
background: #D5E7D3;
padding: 20px;
}
.row-1 {grid-row: 1}
.row-2 {grid-row: 2}
.row-3 {grid-row: 3}
.col-1-4 {grid-column: 1 / 4;}
.col-1-2 {grid-column: 1 / 2;}
.col-3-4 {grid-column: 3 / 4}
.col-5-7 {grid-column: 5 / 7}
.col-3-5 {grid-column: 3 / 5}
<div class="grid">
<div class="row">
<div class="cell col-1-4 row-1"></div>
<div class="cell col-1-2 row-2"></div>
</div>
<div class="row">
<div class="cell col-3-4 row-1"></div>
<div class="cell col-5-7 row-1"></div>
<div class="cell col-3-4 row-2"></div>
<div class="cell col-3-5 row-3"></div>
</div>
<div class="cols">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>