title: How to make a content in the grid to spot a space around the cell by half-a-gap?
body: <p>I need to make this:
  <a href="https://i.stack.imgur.com/QasfE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QasfE.png" alt="enter image description here"></a></p>
  
  <p>You can see that the button takes 100% width of the grid column and moreover takes half of the column gap space around. I don't know how to achieve it.</p>
  
  <p>Grid container:</p>
  
  <pre><code>#header.about-page-header {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 4fr 1fr 1fr 1fr;
      grid-column-gap: 60px;
      grid-row-gap: 45px;
      grid-template-areas:
          "title    title    title    ."
          "subtitle subtitle subtitle ."
          ".        .        .        ."
          "contacts contacts .        btn";
      align-content: end;
      align-items: center;
  }
  </code></pre>
  
  <p>The button:</p>
  
  <pre><code>a.about-page-header__btn {
      grid-area: btn;
      width: auto;
      justify-self: stretch;
  }
  </code></pre>
  
  <p>Currently, my button takes just 100% width of the column. But how to make it to place half of a gap around?</p>