如何允许网格单元之间重叠？

Question

在网格中，有没有一种方法可以让我的文本重叠到它旁边的单元格中？

时间（如图中所示）自动更新。随着时间增加到几分钟，整个网格的宽度都会增加，这是我不希望的。我只希望文本重叠到下一个单元格中，而不是扩大列。

谢谢

.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 gridImage of unwanted behavior

Answer 1

简短的答案，没有Java语言，您无法动态调整网格列的跨度。您可以将两个文本项放在相同的单元格中，并根据需要放置它们，例如使用flexbox：

.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>