Имея проблемы с максимальной шириной колонн (ах) в сетке с максимальным количеством разрешенных столбцов и минимальной ш ⇐ CSS

[Anonymous]

Начальная цель состояла в том, чтобы иметь:
a Grid с максимальным количеством столбцов, которые не будут превышены,
Минимальная ширина столбцов, обеспечивающая разрыв для сжатия ширины столбцов,
и обычное изгиб -поведение. < /p>
меньше пространства, меньше столбцов, до минимального состава. Ширина. --grid-max-col-count: 4;

Цель была успешно достигнута со следующим синтаксисом, вдохновленным Кевином Пауэллом https://codepen.io/kevinpowell/pen/ggrwqxj:
.card-container {
display: grid;

--grid-max-col-count: 4;
--grid-min-col-size: 350px;
--grid-max-col-size: 400px;
--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-count) - 1)) / var(--grid-max-col-count));
--col-min-width-calc: min(100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)));

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

, к сожалению, для моего случая, но последовательно с приведенным выше кодом столбцов и, таким образом, карты внутри столбцов растягиваются в бесконечность, когда достаточно места. Пространство в правую сторону точки зрения.
фактическое поведение , как упоминалось выше-столбцы продолжают растягиваться в бесконечности, когда экран становится все более широким и шире.
Я пробовал 50 различных перестановки этого основания (I пришел с):--по-сигнал-width-width-calc: max (100%, минимальный минимальный (---------------- var (--Colc-Calc сетка))); < /code>
, в конце концов, только одно пользовательское свойство:-grid-max-colle-size: 400px; < /p>
Нет веселья, к сожалению. < /p>
Как это можно достичь? cards-outline.css < /p>
или изменить заголовок в HTML, чтобы отразить ваше желаемое имя. < /p>





Cards Outline











< /code>
/* Minimal CSS for main + card container + outlined cards only */

main {
width: min(100%, 100rem);
margin-inline: auto;
}

.card-container {
display: grid;

/* Responsive grid similar to existing project */
--grid-max-col-count: 4;
--grid-min-col-size: 350px;
--col-gap: 2px;

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

--grid-col-size-calc: calc((100% - var(--col-gap) * (var(--grid-max-col-count) - 1)) / var(--grid-max-col-count));
--col-min-width-calc: min(100%, max(var(--grid-min-col-size), 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; /* minimal size so the outline is visible */
}


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