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

Question

[Григорий]

Всем привет
Верстка таблицы на Grid

display: grid;
grid-template-columns: repeat(3,minmax(min-content,max-content));

В мобильной версии

@media (max-width: 600px)
    grid-template-columns: repeat(1, auto);

В результате в мобильной версии происходит схлопывание большого количества ячеек

Если убрать display: grid
То всё отображается корректно

Найти такую ошибку в интернетах не удалось

Comments

[FrelFrloich]

Вот
grid-template-columns: 1fr;

Answer 1

[Pavel-ww]

Если убрать display: grid

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

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

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

Comments

[Григорий]

Да, если с flex то всё ок
Хотелось бы понимание причин ошибки именно с grid
Выложить не могу
c 1fr происходило то же самое, сути не меняет repeat отрабатывает как надо)
Делалось просто чтобы была аналогия
изначально
grid-template-columns: repeat(5,minmax(min-content,max-content));
для мобильной версии
grid-template-columns: repeat(1,minmax(min-content,max-content));

По сути структура следующая

.gtable
    .gtable__cell

ячеек получает 1100 штук
после 926 ячейки происходит схлопывание (коллапс)


По Вашим предложениям никаких изменений не произошло - проблема осталась

[Pavel-ww]

Григорий, без кода помочь вам не возможно

[Григорий]

В общем на FireFox всё ок работает
На Хроме больше 1000 строк хлопывает

[Григорий]

Для истории
В общем-то Chrome почему-то не хочет отрисовывать больше 1000 строк grid

https://chromium.googlesource.com/chromium/src/+/8...

[Pavel-ww]

Григорий, 1000 строк слишком много)). Не заморачивайтесь, flex да и всё

[Ankhena]

Григорий, у вас там вроде все значения россыпью? Объединить по карточкам не вариант?

[Григорий]

Pavel-ww,
да какой там много))
там изначально 250+- строк по 5 столбов
на мобиле соответственно адаптируется в столбец больше 1000 строк - вот тут то grid и ложится но только в chrome, firefox при этом всё отображает
Первый раз встречаюсь с таким ограничением на chrome )
Решение костылём я знал) мне было интересно прямое решение - используя только grid )

[Григорий]

Ankhena, можно было как угодно решить - задача была именно в grid
но chrome первый раз в жизни так подвёл)

[Ankhena]

Григорий, мой комментарий не отменяет гридов, но элементов станет меньше. Тем более, что по семантике обертки вполне подходят.

[Григорий]

Ankhena,
тут дело в автотаблице - которая сама определяет ширину столбцов
В случае с карточками нужно будет строго для каждой колонки прописывать размер
а если к примеру я задаю общее количество столбцов и автоширину через

grid-template-columns: repeat(5,minmax(min-content,max-content));

то просто отображаю данные без разбивки на строки

Может я не так понял вас?)

[Ankhena]

Григорий, у вас даже скрина десктопного нет.
Но попробую догадаться.

Да, пока нет subgrid придется выкручиваться. Один из способов, которым я это делаю это display: contents. Так на десктопе данные снова "рассыпятся".

[Pavel-ww]

Ankhena, display: contents замечательное свойство, если бы не Сафари, который всё еще пьет нашу кровь после смерти IE

[Ankhena]

Pavel-ww, для этой задачи баги несущественны.

[Григорий]

Ankhena,

Вот десктоп

Я на самом деле первый раз вообще с grid решил поработать
Думал что получится обойтись только grid без костылей)
Ошибался
Про subgrid прочитал - действительно наверное было бы решением...хотя непонятно что там chrome бы опять учудил))
Поэтому всё ячейки в общем потоке лучше для автоматической ширины столбцов
А для вложенных строк получается надо будет в ручную прописывать ширину

В общем пока обойдусь flex для мобильной версии

[Ankhena]

Григорий, для мобилки и флекс не нужен, разве что для gap.