I have the following setup:

A grid container is placed within a wider div element. The grid element has width fit-content.
The grid has columns auto-1fr-auto-1fr. The exact widths of all columns depends on dynamic content and is unknown (the auto columns are quite narrow).

I wish to center the complete grid within the parent container, however, in doing so ignore the first, leftmost column. (i.e. the grid should be placed as if it consisted just of the 1fr-auto-1fr columns).

I’m trying all sorts of things; what gets me the closest seems to be to set the left columns’ items’ width to 0; however, this fails to account for any spacing between columns 1 and 2 like grid-column-gap. I wish to avoid anything that adds additional, unused space to the right.

Any canonical way to achieve this?

(In my example, the v in the middle and the ^below should line up)

Link here: jsFiddle

Or code:

<style>
.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;
}
</style>
<div class="parent">
  <div class="grid-container">
    <div>1</div>
    <div class="grid-dummy">Just some long content to stretch</div>
    <div> v </div>
    <div class="grid-dummy">Short</div>
        <div>2</div>
    <div class="grid-dummy">Some more</div>
    <div> v </div>
    <div class="grid-dummy">Whatever</div>
  </div>
  <div class="mid-indicator">^
  </div>
</div>