Игнорируйте один столбец сетки для центрирования всей сетки, например. с маржой-авто ⇐ CSS

[Anonymous]

У меня следующая настройка:
Контейнер сетки размещается внутри более широкого элемента div. Элемент сетки имеет содержимое, соответствующее ширине.
Сетка имеет столбцы auto-1fr-auto-1fr. Точная ширина всех столбцов зависит от динамического содержимого и неизвестна (автостолбцы довольно узкие).
Однако при этом я хочу центрировать всю сетку внутри родительского контейнера. игнорировать первый, крайний левый столбец. (т. е. сетка должна располагаться так, как если бы она состояла только из столбцов 1fr-auto-1fr).
Я пробую всякое; что меня больше всего привлекает, так это установка ширины элементов левых столбцов на 0; однако это не учитывает расстояние между столбцами 1 и 2, например, зазор между столбцами сетки. Я хочу избегать всего, что добавляет дополнительное неиспользуемое пространство справа.
Есть ли канонический способ добиться этого?
(В моем примере v посередине и ^ниже должны совпадать)
Ссылка здесь: jsFiddle
Или код:
< pre class="lang-html Prettyprint-override">
.parent{
width: 600px;
border: black solid 1px;
}

.grid-container{
display: grid;
grid-template-columns: auto 1fr auto 1fr;
margin: auto;
width: fit-content;
grid-gap: 20px;
}

.grid-dummy{
height: 30px;
border-radius: 5px;
background-color: CornflowerBlue;
}
.mid-indicator{
margin: auto;
width: fit-content;
}



1
Just some long content to stretch
v
Short
2
Some more
v
Whatever

^




Подробнее здесь: https://stackoverflow.com/questions/786 ... argin-auto