CODEWITHSUNDEEP
css-grid
Elise
Elise

Reputation: 5124

CSS grid overlapping cells without disrupting normal flow

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:

Two-week calendar grid

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.

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:

Cell overlap with explicit positioning

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>

Upvotes: 1

Views: 275

Answers (1)

vals
vals

Reputation: 64174

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>

Upvotes: 3

Related Questions