Достижение предсказуемого изменения размера с помощью столбцов сетки-шаблона ⇐ Html

[Anonymous]

Я работаю над адаптивной страницей, используя поле Grid. Столбцы сетки должны адаптироваться к различным устройствам. Фрагмент ниже демонстрирует мою попытку.
Проблема:

Изменение размера застревает на ширине 500 пикселей. Поэтому @media для устройств с разрешением 480 пикселей (телефонов) никогда не выполняется. Я тестировал это в Firefox и Chrome — результаты те же.
Как добиться предсказуемого поведения?

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

* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.container {
display: grid;
grid-template-rows: 1fr;
grid-template-areas: "area_a area_b area_c";
min-width: 320px;
transition: grid-template-columns 0.5s ease;
}
.mgn-1 {
grid-area: area_a;
background: yellow;
}
.content {
grid-area: area_b;
background: lightblue;
}
.mgn-2 {
grid-area: area_c;
background: yellow;
}
.container div {
font-family: sans-serif;
height: 100px;
overflow-x: hidden;
}
@media (min-width: 769px) {
.container {
grid-template-columns: 20% 60% 1fr;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 20% 75% 1fr;
}
}
@media (max-width: 480px) {
.container {
grid-template-columns: 20px 1fr 20px;
}
}

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

Подробнее здесь: https://stackoverflow.com/questions/798 ... te-columns