How to allow overlap between grid cells?

Question

In Grid, is there a way to allow my text to overlap into the cell next to it?

The time (as seen in the image) auto updates. As the time increases to minutes the whole grid increases in width, which I don't want. I just want the text to overlap into the next cell instead of widening the column.

Thanks

.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  background-color: #1C232E;
  grid-template-columns: min-content auto;
  }

Image of the grid Image of unwanted behavior

Answer 1

Short answer, you can't adjust grid column spans dynamically, without Javascript. You can just put both text items in the same cell, and position them how you want, with flexbox for example:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #fff;
  grid-gap: 6px;
}

.grid>div {
  padding: 1em 1em;
  background-color: dodgerblue;
  display: flex;
  flex-flow:column;
  min-height: 100px;
}

.grid > div span:nth-child(2){
    margin: auto;
}

<div class="grid">
  <div>
    <span>Last updated 1 minute and 49 seconds ago</span>
    <span>watch_server</span>
  </div>
  <div>
    <span>Last updated 1 minute and 49 seconds ago</span>
    <span>watch_server</span>
  </div>
</div>