Выровнять столбцы, используя сетку-колонны ⇐ CSS

[Anonymous]

У меня есть два раздела, используя CSS Grid и Grid-Template-Columns. 1 -й показывает 4 ящика на строку, в то время как 2 -й показан 3.
Поскольку первый элемент этого 2 -го секции имеет 50%, я бы хотел, чтобы пространство/разрыв рядом с ним соответствовал пространству/зазору 1 -й секции (см. Изображение ниже). Как я могу достичь этого? Использование 2FR вместо 50% не решает проблему. Любая помощь приветствуется.

Код: Выделить всё

#grid1 .container, #grid2 .container {
display: grid;
gap: 12px;
grid-auto-flow: column;
margin-bottom: 20px;
}
#grid1 .container div, #grid2 .container div {
border: 1px solid #c00;
background-color: #ca3c46;
color: #fff;
font-weight: bold;
text-align: center;
padding: 20px;
}
#grid1 .container {
grid-template-columns: repeat(4, 1fr);
}
#grid2 .container {
grid-template-columns: 50% 1fr 1fr;
}



Box 1
Box 2
Box 3
Box 4




Box 1
Box 2
Box 3

https://jsfiddle.net/k3swl4f9/2

Подробнее здесь: https://stackoverflow.com/questions/796 ... te-columns