Как сделать так, чтобы контент в сетке выделял пространство вокруг ячейки на полшага? - PullRequest
Новая
       30

Как сделать так, чтобы контент в сетке выделял пространство вокруг ячейки на полшага?

0 голосов
/ 28 сентября 2018

Мне нужно сделать это: enter image description here

Вы можете видеть, что кнопка занимает 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% шириныколонка.Но как сделать так, чтобы половина разрыва была вокруг?

...