Я совершенно новичок в CSS Grid. У меня есть простая галерея, где столбец элементов неизвестен.
У меня есть следующий CSS для родителя:
.gallery {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
grid-auto-flow: dense;
grid-gap: 1px;
}
И элементы в галерее могут иметь классы, которые принимают несколькостолбцы, например:
.grid-col-2 {
grid-column: span 2;
}
Но у меня проблема. При изменении размера браузера (или в мобильном устройстве), если есть место только для одного столбца (в моем случае ширина меньше 600 пикселей), grid-column нарушает компоновку, и вместо одного столбца, есть 2, а второйКолонка имеет неправильный размер.
Теперь первое, что мне пришло в голову, - это создать медиа-правило, которое говорит, что если ширина меньше 600 пикселей, вместо этого используйте grid-column: 1 / -1. Но это приводит меня к другой проблеме (без решения afaik), галерея не обязательно будет на 100% шириной окна, и нет правил мультимедиа, основанных на ширине родительского элемента.
Вот изображение, показывающее, что происходит:
А вот такая же скрипка: https://jsfiddle.net/pynd13bv/
Есть лиспособ сказать Grid не создавать дополнительные столбцы из-за grid-column, а вместо этого просто взять одну полную строку, не нарушая компоновку?