CSS Grid: почему 1fr auto 1fr не сохраняет центрирование среднего столбца? [закрыто] ⇐ CSS

[Anonymous]

Я пытаюсь создать простой макет из трех столбцов, используя CSS Grid:

• левое содержимое выровнено по левому краю
• правое содержимое выровнено по правому краю
• средний элемент должен быть геометрически центрирован относительно всего контейнера

Я ожидал, что это определение сетки обеспечит идеальное центрирование центрального столбца:

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

grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

Однако, когда левый и правый столбцы содержат разное количество контента, центральный столбец смещается и перестает центрироваться относительно контейнера.
Минимальный воспроизводимый пример

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

.container {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "left center right";
align-items: center;

padding: 0.5rem;
gap: 0.5rem;

border: 1px solid black;
background: silver;
}

.container>div {
padding: 0.5rem 1rem;
white-space: nowrap;
min-width: 0;

border: 1px solid black;
background: white;
border-radius: 4px;
}

.left {
grid-area: left;
justify-self: start;
}

.center {
grid-area: center;
justify-self: center;
}

.right {
grid-area: right;
justify-self: end;
}

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

Left longest text asd lorem ipsum dolor
Center

Close

Наблюдаемое поведение
Это все еще хорошо:



Центральный элемент должен быть перемещен рядом с левым элементом, но оно перекрывается


Вот так:


Я потратил целый день, пытаясь решить эту задачу, но безуспешно...
PS: Там вы можете найти этот код

Подробнее здесь: https://stackoverflow.com/questions/798 ... y-centered