CSS-адаптивный макет сетки: интервал между столбцами сетки нарушает minmax
У меня есть аккуратная адаптивная сетка вроде этой:
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Это делает каждый элемент сетки шириной не менее 200 пикселей. Один из предметов (красный) в два раза шире, вот так:
grid-column-end: span 2;
Пока отлично!
Теперь, когда я изменяю размер до небольшой ширины, красный элемент заставляет сетку делиться на два столбца. Это дает мне странный маленький столбец, хотя я указал минимальную ширину 200 пикселей. Смотреть:
Мне бы очень хотелось, чтобы красный элемент свернулся в один столбец, чтобы сетка не рвалась.
Однако проблема в том, что я не знаю ширины общей сетки, поэтому я не могу использовать медиа-запрос, который запускается при определенном размере области просмотра.
Есть ли способ принудительно поместить красный элемент в один столбец или, возможно, определить столбцы сетки другим способом, который решит эту проблему?
К сожалению, я не могу этого сделать. Я разрабатываю визуальный конструктор веб-сайтов, и это проблема, которую я предвижу, когда клиенты создают свои собственные макеты. Например, значение 200 пикселей может иметь любую заданную ширину.
Без достаточного количества кода для воспроизведения проблемы (даже на самом базовом уровне) трудно предлагать решения. Мы можем только догадываться об этом. Например, вы можете взять первый элемент из текущей сетки. Пусть он функционирует как отдельный контейнер, либо сетка, либо гибкость. Но это только предположения; без кода я не могу протестировать или показать вам результаты.
Вы ищете решение только для css или хотите использовать javascript?
Ответы 1
При использовании сетки нужно помнить о размерах и немного математике. Если вы говорите элементу, чтобы он занимал 2 столбца, это означает, что вы всегда хотите, чтобы в вашей сетке всегда было как минимум 2 столбца, он не превратится в сетку из 1 столбца, если экран станет меньше. Теперь у вас есть минимальная ширина вашей сетки 400 пикселей.
Для этого столбца странного размера, поскольку у вас есть 2 столбца, а столбец 2 занимает минимальную ширину 200 пикселей, а элемент после этого остается с этим странным размером.
Вы можете написать медиа-запрос в этой точке останова, чтобы сообщить элементу 1, чтобы он оставался в столбце 1, и это должно исправить это.
@media screen and (max-width:415px){
.item1 {
grid-column: 1;
background:red;
}
}
Посмотрите Codepen, на который я ссылаюсь
Хотя я всегда не соглашался с тем, чтобы делать такие узкоспециализированные медиа-запросы без уважительных причин, похоже, что это единственное решение, помимо разбиения разметки на более мелкие части, что может быть проблематичным по-своему. Насколько я знаю, до тех пор, пока CSS не будет обновлен, чтобы элементы сетки могли содержать столбцы span minmax(1, 2), нам придется иметь дело с хаками.
Хотя вы можете не знать точных размеров, при которых ваш дизайн начинает ломаться, вам нужно начать искать эти точки останова, а затем использовать медиа-запросы, чтобы предвидеть эти разрывы. Между прочим, если вы можете опубликовать свой код минимальный воспроизводимый пример (включая фиктивный контент, который позволяет этому коду воспроизвести вашу проблему), вы, вероятно, получите лучшие или более ответы. В качестве альтернативы вы должны / могли бы сначала разработать дизайн для мобильных устройств (с маленьким экраном), а затем использовать точки останова, чтобы настроить дизайн для больших экранов. Это может упростить, а может и не упростить работу, которую вам нужно будет выполнить.