CSS grid overlapping cells without disrupting normal flow - css-grid

Question

I'm wondering whether it's possible to specify a grid cell to overlap another area of the grid, without having to explicitly specify the row and column for the cells it overlaps.
Consider a two-week calendar:
<div class="calendar">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
</div>
Using grid:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
So far so good:
I now want to add a range highlight cell:
<!-- ... -->
<span>13</span>
<span>14</span>
<span class="range"></span>
</div>
It should span Wednesday-Sunday on the first week:
.range {
grid-column: 3/8;
grid-row: 1;
width: 100%;
height: 100%;
background: skyblue;
}
Unless I now explicitly go and specify the row and col for each of the five affected day cells, there is no automatic overlap.
To get the overlap I want, I need to add:
.calendar span:nth-child(3) {
grid-row: 1;
grid-columN: 3;
}
.calendar span:nth-child(4) {
grid-row: 1;
grid-columN: 4;
}
/* etc... */
Result:
Is there any way to say that all cells should flow automatically, in order, unless otherwise stated, even if they overlap?
Snippet
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
width: 30em;
}
.range {
grid-column: 3/8;
grid-row: 1;
width: 100%;
height: 100%;
background: skyblue;
z-index: -1;
}
/* I don't want to do this: */
.calendar span:nth-child(3) {
grid-row: 1;
grid-columN: 3;
}
.calendar span:nth-child(4) {
grid-row: 1;
grid-columN: 4;
}
.calendar span:nth-child(5) {
grid-row: 1;
grid-columN: 5;
}
.calendar span:nth-child(6) {
grid-row: 1;
grid-columN: 6;
}
.calendar span:nth-child(7) {
grid-row: 1;
grid-columN: 7;
}
<div class="calendar">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span class="range"></span>
</div>

Answer 1

You only need to position the range absolute, this will take it out of flow. (You also need to set the calendar position relative)
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
width: 30em;
position: relative;
}
.range {
grid-column: 3/8;
grid-row: 1 / span 1;
width: 100%;
height: 100%;
background: skyblue;
z-index: -1;
position: absolute;
}
<div class="calendar">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
<span>13</span>
<span>14</span>
<span>15</span>
<span class="range"></span>
</div>