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中断，以使文本“跳过”页面中的空白。

这是一张图片来说明：