如何在网格中制作内容以通过半间隙发现单元格周围的空间？

Question

我需要这样做：

您可以看到该按钮占据了网格列的100％宽度，而且占据了列间隙的一半。我不知道该怎么实现。

网格容器：

#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;
}

按钮：

a.about-page-header__btn {
    grid-area: btn;
    width: auto;
    justify-self: stretch;
}

当前，我的按钮仅占据列的100％宽度。但是如何使其与周围之间留出一半的距离？