CSS-адаптивный макет сетки: разрыв диапазона столбца сетки minmax

Question

У меня есть аккуратная адаптивная сетка, подобная этой:

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Это делает каждый элемент сетки шириной не менее 200 пикселей. Один из предметов (красный) в два раза шире, например:

grid-column-end: span 2;

Отлично, пока!

Теперь, когда я изменяю размер на небольшую ширину, красный элемент заставляет сетку делиться на два столбца. Это дает мне странный маленький столбец, хотя я указал минимальную ширину в 200 пикселей. Посмотрите:

Мне бы очень хотелось, чтобы красный элемент свернулся в один столбец, чтобы сетка не сломалась.

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

Есть ли способ заставить красный элемент переместиться в один столбец или, возможно, определить столбцы сетки другим способом, который решит эту проблему?

Answer 1

Вы должны помнить о размерах и немного математики при использовании сетки. Если вы говорите, что элемент занимает 2 столбца, то это означает, что вы всегда хотите иметь по крайней мере 2 столбца в своей таблице, он не превратится в сетку из 1 столбца, если экран станет меньше. Теперь у вас есть минимальная ширина 400 пикселей для вашей сетки.

Для этого столбца странного размера, поскольку у вас есть 2 столбца, а столбец 2 занимает минимальную ширину 200 пикселей, а элемент после этого остается с таким странным размером.

Вы можете написать медиа-запрос в этой точке останова, чтобы ваш элемент 1 остался в столбце 1, и это должно исправить это.

@media screen and (max-width:415px){
.item1 {
grid-column: 1;
background:red;
}
}

Проверьте кодекс, на который я ссылаюсь

см. На Codepen