У меня есть синтаксис, который управляет соотношением колонков сетки: < /p>
Максимально допустимое количество столбцов в сетке: --грид-макс-colar-ryber: 4; < /li>
Минимальная ширина колонны (для сетки. /> В противном случае идеально гибкий: сжимается до одного столбца и расширяется до максимально допустимого количества столбцов. Он вычисляет максимально допустимое количество столбцов с другими аспектами, такими как промежутки
, а также вычисляет минимальную разрешенную ширину столбцов. Нет:-max-col-width: 550px; < /p>
И поэтому цель состоит в том, чтобы добавить этот расчет. < /P>
.card-container {
display: grid;
--grid-max-col-number: 4;
--min-col-width: 450px;
--max-col-width: 450px;
--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 -weard поведение, когда максимальная ширина столбца достигается, столбец (ы) не должен растянуть дальше. Если я установил значение на 350px - ширина столбца не должна превышать это значение
Фактическое поведение - столбцы продолжают растягиваться в бесконечность, поскольку экран становится шире и шире. Очевидно, я мог бы просто ограничить ширину контейнера с приложением, но это не имеет отношения к этой задаче.`--col-max-width-calc: max(100%, min(var(--grid-max-col-size), var(--grid-col-size-calc)));`
< /code>
Но не удалось разрешить его
это даже возможно?
Cards Outline
< /code>
/* Minimal CSS for main + card container + outlined cards only */
main {
width: min(100%, 100rem);
margin-inline: auto;
}
.card-container {
display: grid;
--grid-max-col-number: 4;
--min-col-width: 450px;
--max-col-width: 450px;
--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));
.card {
border: 1px solid #000;
background-color: grey;
min-height: 200px; /* minimal size so the outline is visible */
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... -container
