html - 当 CSS 网格中的元素使用多于一行/列时显示排水沟

Question

在 CSS 网格中，可以使用grid-column-gap和grid-row-gap属性来设置元素之间的间距宽度。

但是，如果一个元素使用多个网格区域，则不会显示排水沟。

有没有办法让排水沟显示一个元素是否占据了多个网格区域？我正在寻找与此类似的东西：

div{
  display: grid;
  grid-template-columns: 140px;
  grid-template-rows: 1fr 1fr;
  background:#eee;
  row-gap: 10px;
  width:140px;
}
div>div{
  background: white;
  display:block;
}

<div>
  <div>
  This is ONE element
  </div>
  <div>
  split in two
  </div>
</div>

但与其使用两个元素，我希望用 CSS 拆分一个

编辑：这里有一些上下文。

我希望将一些文本和图像拆分为“页面”，以便溢出一页的任何内容最终出现在另一页上。想想 MS Word。

JavaScript 解决方案可以在页面溢出时添加页面，但考虑到用户操作和边缘情况如何处理（例如，如果用户删除一个字符，我怎么知道文本是否会现在适合一页，或者如果仍然需要第二页？）。

因此，我要做的是在用户写入时扩展“页面”（以页面为背景），并将 CSS 中断放在使文本“跳过”页面间隙的元素中。

这是一张图片来说明：

标签： htmlcsscss-grid