Отображение желобов, когда элемент в сетке 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-разрывы в элемент, которые заставляют текст «перепрыгивать» через пробелы на страницах.

Вот картинка для иллюстрации: