Как применить контейнерный запрос в зависимости от размера столбца? ⇐ CSS

[Anonymous]

Я сталкиваюсь с проблемой, когда мне нужен класс карт, чтобы иметь разные макеты в зависимости от размера столбца, в котором они находятся, но кажется, что запросы на контейнер не могут использовать значения %-ge? Ниже приведен пример того, что у меня есть, есть ли способ достичь этого? Или мне нужно для некоторой ситуации с волшебным значением? Lang-CSS PrettyPrint-Override ">

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

*,
*::before,
*::after {
box-sizing: border-box;
}

.content-grid {
--padding-inline: 1rem;
--content-max-width: 900px;
--breakout-max-width: 1200px;

--breakout-size: calc((var(--breakout-max-width) - var(--content-max-width)) / 2);

display: grid;
grid-template-columns:
[full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min(100% - (var(--padding-inline) * 2),
var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
row-gap: 2rem;
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
grid-column: content;
}

.content-grid>.breakout {
grid-column: breakout;
}

.content-grid>.full-width {
grid-column: full-width;

display: grid;
grid-template-columns: inherit;
}

html {
color-scheme: dark;
}

.primary-header {
padding-block: 1rem;
margin-block-end: 3rem;
background: mistyrose;
color: black;
}

.primary-header__layout {
display: flex;
align-items: center;
justify-content: space-between;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: max(5vw, 1rem);
}

nav a {
color: inherit;
text-decoration: none;
}

nav a:hover,
nav a:focus {
color: darkblue;
text-decoration: underline;
}

.even-columns {
display: flex;
gap: 1rem;
}

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 2rem;
}

.col {
container: inline-size;
display: flex;
flex-direction: column;
box-sizing: border-box;
}

.col-4 {
flex: 0 0 calc(100% / (12 / 4) - 2rem);
}

.col-6 {
flex: 0 0 calc(100% / (12 / 6) - 2rem);
}

.col-12 {
flex: 0 0 calc(100% / (12 / 12) - 2rem);
}

.card {
background: red;
padding: 4rem;
}

@container (inline-size > 50px) {
.card {
background: blue;
padding: 4rem;
}
}

@container (min-width: calc(100% / (12 / 6)) - 2rem) {
.card {
background: green;
}
}

@container (min-width: calc(100% / (12 / 12)) - 2rem) {
.card {
background: yellow;
}
}< /code>



[list]
[*][url=#]Home[/url]
[*][url=#]About[/url]
[*][url=#]Blog[/url]
[*][url=#]Contact[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... olumn-size