gtomilin
@gtomilin
JavaScript HTML CSS

Как побороть схлопывание элементов Grid сетки?

Всем привет
Верстка таблицы на Grid
display: grid;
grid-template-columns: repeat(3,minmax(min-content,max-content));

В мобильной версии
@media (max-width: 600px)
    grid-template-columns: repeat(1, auto);


В результате в мобильной версии происходит схлопывание большого количества ячеек
618ccdb3bc5c6545517244.png
Если убрать display: grid
То всё отображается корректно

Найти такую ошибку в интернетах не удалось
  • Вопрос задан
  • 282 просмотра
Пригласить эксперта
Ответы на вопрос 1
Pavel-ww
@Pavel-ww
Если убрать display: grid

Так уберите. Перейдите на flex, flex-direction: column

А по гидам:
repeat(1, auto); - странное значение. Что репититься то должно? Просто 1fr поставьте. repeat имеет смысл если больше одной колонки, для сокращения записи. И добавьте grid-auto-rows.

Вообще всегда надо давать ссылку на полноценный код в песочнице или сайт. И правила сервиса об этом же говорят
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы