Having a page where we require that if container width is below view size then change 5 columns into 2 columns and trying below:
<code>.list {
background-color: grey;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
container-type: inline-size;
}
.letter {
display: grid;
grid-auto-flow: row;
justify-items: center;
align-content: center;
color: white;
}
@container (max-width:500px) {
.list {
grid-template-columns: repeat(2, 1fr);
}
.letter {
background-color: green;
}
}</code>
<code>.list {
background-color: grey;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
container-type: inline-size;
}
.letter {
display: grid;
grid-auto-flow: row;
justify-items: center;
align-content: center;
color: white;
}
@container (max-width:500px) {
.list {
grid-template-columns: repeat(2, 1fr);
}
.letter {
background-color: green;
}
}</code>
.list {
background-color: grey;
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(5, 1fr);
container-type: inline-size;
}
.letter {
display: grid;
grid-auto-flow: row;
justify-items: center;
align-content: center;
color: white;
}
@container (max-width:500px) {
.list {
grid-template-columns: repeat(2, 1fr);
}
.letter {
background-color: green;
}
}
<code><div class="list">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
</div></code>
<code><div class="list">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
</div></code>
<div class="list">
<div class="letter">A</div>
<div class="letter">B</div>
<div class="letter">C</div>
<div class="letter">D</div>
<div class="letter">E</div>
</div>
But it doesn’t work; checked in Chrome and Firefox in Ubuntu.