Столбцы сетки-шаблона CSS автоматически подстраиваются под минимальный контент ⇐ CSS

[Anonymous]

Мне интересно, можно ли использовать Grid-template-columns: повторение(auto-fit, minmax(150px, 1fr)), где он принимает минимальную ширину дочернего содержимого, например использование auto.
Я хотел бы избежать медиа-запросов для этого экземпляра, поэтому я использую auto-fit, а не auto 1fr.< /p>

Как это выглядит с помощью Grid-template-columns: повтор(auto-fit, minmax(150px, 1fr)):


А вот как это выглядит с помощью Grid-template-columns: auto 1fr:



Итак, предполагаемым результатом является второй скриншот, в то время как с использованием автоподстройки.
Текущий код:

CSS:

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

.grid {
display:grid;
grid-template-rows:minmax(0,1fr);
width:100%;
gap:8px;
}

.row {
display:grid;
/* grid-template-columns:auto 1fr; */
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:8px;
}

.cell-left {
background:peachpuff;
white-space:nowrap;
}

.cell-right {
background:lightsalmon;
}

HTML:

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

some text here

lsdkjfklasj lkfksdfjdsalfjlasdjfkld

Демо: jsfiddle.net/dL6pzje0/
(

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

150px

на данный момент является приблизительным.)
Пожалуйста, дайте мне знать, если подобный вопрос уже задавался! Более того, если это невозможно сделать с помощью CSS-сетки, я в конечном итоге пойду на компромисс, но решил спросить, потому что мне любопытно.
С уважением.

Подробнее здесь: https://stackoverflow.com/questions/791 ... in-content