CSS Grid BentoBox UI Проблема с шириной столбца в определенной точке останова ⇐ CSS

[Anonymous]

Я создал пользовательский интерфейс BentoBox с использованием CSS-сетки, и по большей части он работает нормально, единственная проблема, с которой я столкнулся, - это точка останова между 768 и 926 пикселями.
Я использую Grid-template-columns для динамического добавления столбцов, когда доступно достаточно места, но между вышеупомянутыми точками останова я получаю странный макет из двух столбцов, где первый столбец больше минимального размера, который я определил в мой CSS (400 пикселей), а второй столбец очень мал.
Есть ли правильный способ исправить это или мне просто следует увеличить диапазон запросов мобильных медиа, чтобы также включить эту точку останова< /p>
Учебник, которому я следовал, чтобы реализовать этот макет:
YouTube
Мой текущий код:
CodePen

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

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
}
.grid-wrapper {
width: 100%;
max-width: 100%;
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-auto-rows: 400px;
grid-auto-flow: dense;
}
.grid-item {
padding: 50px;
text-align: center;
background-color: #eee;
border: 1px solid red;
grid-row: span 1;
grid-column: span 1;
}
@media (min-width: 768px) {
.grid-item-1x2 {
grid-column: span 2;
}
.grid-item-2x1 {
grid-row: span 2;
}
.grid-item-2x2 {
grid-row: span 2;
grid-column: span 2;
}
}

Снимок экрана

• Пыталась изменить значения функции minmax
• Используется различные свойства для определения столбца, такие как Grid-template-columns
• Попробовал задать ChatGPT

Подробнее здесь: https://stackoverflow.com/questions/784 ... reak-point