Можно пойти другим путём. «Нарисовать» именованные грид-линии, в том числе и для гаттеров, а потом тянуть грид-ячейки от одной линии до другой.
Например, я задал 8 линий и 7 колонок между ними. Некоторые колонки имеют ширину всего 2rem и используются только как отступы между колонками с контентом.
.article-grid {
grid-template-columns: [edge-left] 2rem [outer-left] 1fr [inner-left] minmax(0, 2rem) [main-left] minmax(auto, 50rem) [main-right] minmax(0, 2rem) [inner-right] 1fr [outer-right] 2rem [edge-right];
}
figure:not(.article-grid--fullscreen) {
grid-column: outer-left / outer-right;
}
aside {
grid-column: inner-right / outer-right;
}
.article-grid--fullscreen {
grid-column: edge-left / edge-right;
}
Исходник
https://github.com/paulradzkov/paulradzkov.com/blo...
Посмотреть в браузере
paulradzkov.com/2017/local_variables 
Простой
