CSS для управления максимальной шириной столбца (не контейнер столбца) [Закрыто] ⇐ CSS

[Anonymous]

У меня есть CSS, который контролирует соотношение кольцо сетки: < /p>

• Максимально допустимое количество столбцов в сетке: --грид-max-colle-number: 4; < /code> < /li>
  Минимальная ширина колонки (для сетки, а не сетка). 200px;
• В противном случае совершенно гибкий: сжимается до одного столбца и расширяется до максимально разрешенного количества столбцов.

Я хочу добавить еще одну переменную, которая будет управлять максимальной шириной каждого столбца:--max-sold: 300px; . в настоящее время есть. Он вычисляет максимально допустимое количество столбцов с другими аспектами, такими как промежутки, а также вычисляет минимальную разрешенную ширину столбцов. Переменная-max-col-width в настоящее время не является частью расчета.
И поэтому цель состоит в том, чтобы добавить этот расчет.

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

.card-container {
display: grid;

--grid-max-col-number: 4;
--min-col-width: 200px;
--max-col-width: 300px;
--col-gap: 1px;

column-gap: var(--col-gap);
row-gap: 5px;

/* grid max columns calculations */

--grid-col-size-calc: calc((100% - var(--col-gap) * (var(--grid-max-col-number) - 1)) / var(--grid-max-col-number));
--col-min-width-calc: min(100%, max(var(--min-col-width), var(--grid-col-size-calc)));

grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width-calc), 1fr));
}

an an aeply поведение - Когда максимальная ширина столбца достигается, столбец (ы) не должен растянуться дальше. Если я установите значение на 300px ширина столбца не должна превышать это значение.
фактическое поведение - столбцы продолжают растягиваться в бесконечность, поскольку контейнер становится шире и шире. Очевидно, я мог бы просто ограничить ширину контейнера с приложением, но это не имеет отношения к этой задаче.

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

--col-max-width-calc: max(100%, min(var(--grid-max-col-size), var(--grid-col-size-calc)));
< /code>
Но не удалось его разрешить. < /p>
это даже возможно? Однажды-max-colle-width 

учитывается во время большей ширины окна, всегда должно быть быть дополнительным горизонтальным пространством в , потому что var (-максимальная ширина) * var (-Grid-max-colar) (

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

300px * 4

) существенно меньше, чем максимальная ширина (

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

1600px< /code>). < /p>


main {
width: min(100%, 1600px);
margin-inline: auto;
border: 1px dashed #000;
}

.card-container {
display: grid;

--grid-max-col-number: 4;
--min-col-width: 200px;
--max-col-width: 300px; /* TODO: use this to limit the column width */
--col-gap: 1px;

column-gap: var(--col-gap);
row-gap: 5px;

--grid-col-size-calc: calc((100% - var(--col-gap) * (var(--grid-max-col-number) - 1)) / var(--grid-max-col-number));
--col-min-width-calc: min(100%, max(var(--min-col-width), var(--grid-col-size-calc)));

grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width-calc), 1fr));
}

.card {
border: 1px solid #000;
background-color: grey;
min-height: 200px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -container