title: Displaying gutters when more than one row/column is used by an element in CSS grid
body: <p>In a CSS grid one can use the <code>grid-column-gap</code> and <code>grid-row-gap</code> properties to set the gutter width between elements. </p>
  
  <p>If an element uses more than one grid area, however, the gutters aren't shown.</p>
  
  <p>Is there any way to get the gutters to show if an element takes up more than one grid area? I'm looking for something visually similar to this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
    display: grid;
    grid-template-columns: 140px;
    grid-template-rows: 1fr 1fr;
    background:#eee;
    row-gap: 10px;
    width:140px;
  }
  div&gt;div{
    background: white;
    display:block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div&gt;
    This is ONE element
    &lt;/div&gt;
    &lt;div&gt;
    split in two
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But rather than having to use two elements, I am hoping to split one with CSS</p>
  
  <p><strong>EDIT:</strong> Here's some context.</p>
  
  <p>I am looking to split some text and perhaps images into 'pages', so that anything that overflows one page ends up on another. Think MS Word. </p>
  
  <p>A JavaScript solution would work for adding pages when one overflows, but would be nigh impossible to get working <em>well</em> given how may user actions and edge cases there are to handle (e.g. if the user deletes a character, how do I know if the text would now fit on one page, or if the second page is still necessary?).</p>
  
  <p>So what I am looking to do is to extend the 'page' as the user writes (with a page as the background) and put CSS breaks in the element that make the text 'jump over' the gaps in the pages.  </p>
  
  <p>Here's a picture to illustrate:</p>
  
  <p><a href="https://i.stack.imgur.com/qh2Hh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qh2Hh.png" alt="enter image description here"></a></p>