Адаптивная сетка CSS неправильно реагирует на небольшой браузер ⇐ Html

[Anonymous]

Я пытаюсь создать отзывчивый макет колонны, который должен быть довольно стандартным в наши дни. Тем не менее, я столкнулся с проблемой, которую я не понимаю.

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

 
 
 

< /code>
со следующим CSS: < /p>
.content-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 10px;
}

.content-grid > div { /* Just to make the boxes visible */
border: solid 2px blue;
background-color: red;
}

.content-grid-4 { grid-column: span 4; }
.content-grid-6 { grid-column: span 6; }
.content-grid-8 { grid-column: span 8; }
.content-grid-12 { grid-column: span 12; }

@media only screen and (max-width: 768px) {
.content-grid {
grid-template-columns: 1fr;
}
}
< /code>
Согласно тому, что я прочитал (и спрашивал несколько LLMS о), это должно создать сетку из 1 столбца, когда дисплей менее широкий. Я подтвердил с Devtools, что этот медиа -запрос вступает в силу, когда браузер узкий. Макет столбца Я бы ожидал, что контент-Грид-4 

div будет отображаться в строке само по себе, а не в той же строке, что и Content-Grid-8 .
Используя Devtools, это выглядит так, как будто есть около 12 столбцов столбцов. src = "https://i.sstatic.net/bpmfbmzu.png"/>
Я не могу, для меня, понять, почему это не работает, как ожидалось. Я не разработчик фронта, что, вероятно, является фактором, но это должно быть достаточно просто для меня.
Так почему это не работает, как ожидалось? < /P>

Подробнее здесь: https://stackoverflow.com/questions/797 ... ll-browser