Как реализовать отступы между отдельными колонками CSS Grid?

Question

[veles09]

Предположим есть CSS Grid

.main-header
	position: relative
	grid-template-columns: 320px 263px 397px 460px
	grid-gap: 80px

Отступы между ними будут по 80 пикселей. А мне надо чтобы между 1 и 2 колонкой было 30px, 2-3=50px 3-4 колонкой= 50px.
Подскажите как можно реализовать такое в CSS Grid

Answer 1

[Павел Радьков]

Можно пойти другим путём. «Нарисовать» именованные грид-линии, в том числе и для гаттеров, а потом тянуть грид-ячейки от одной линии до другой.

Например, я задал 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

Comments

[veles09]

Благодарю, но сделал по своему - сделал 3 колонки а первую внутри разбил ещё на 2 колонки:)