Comments 10
В подобных статьях первым делом хочется прочитать, чем автора не устроил нативный css grid? Потому как там карточки делаются в несколько строк кода и работают абсолютно плавно без необходимости что-то троттлить. Я вполне допускаю, что у вас были какие-то специфические на то причины. Но пока что вся затея выглядит как типичный молотковый поход, когда все проблемы похожи на гвозди.
Да тут и flex хватит вполне
Да, по большому счёту оно так. Просто с гридами, всё равно где-то придётся писать media-queries беря за основу весь viewport и делать калькуляцию карточек в условиях, когда layout страницы настраивается из админки, возможны и боковые колонки, да ито нет определённости в ширине/соразмерности сайдбара(ов). А каждая карточка есть пост/статья, их количество растёт, там же и пагинация и количество статей на страницу задаётся тоже явно, в админке. Css grid - конечно серьёзный инструментарий (возможно нужно побольше практики), но, в моём случае, оптимальным увидел сдвиг внимания на "контейнер" карточек, решил поэкспериментировать с ResizeObserver, не зря ведь придумали ))
Не нужно гридам ни медиа-запросов, ни знание размеров сайдбаров, ни каких-то сложных вычислений. Всё делается в несколько строк кода.
с ResizeObserver, не зря ведь придумали
Единственное применение его мы придумали только для Responsive DOM, когда верстка такова, что приходится некоторые элементы таскать по DOM в зависимости от медиа. У нас, к примеру, на сайте есть две отдельных строки навигации в десктопной версии, которые в мобильной версии спрятаны как один список под "бутерброд" (вот тут мы переносим вторую строку к первой и полностью меняем им вид в колонку). Ну или перенос условного меню третьего уровня (привет внутрисервисное меню управления пользовательскими данными) из "третьей" строки на мобилах в правую колонку на десктопе
Это что-то вроде Grid List в Angular Material?
Выглядит как изобретение велосипеда который ещё и криво работает, в чем практическая польза такой реализации перед дефолтными гридами или флексами?
У вас ещё и высота карточек разная, это прям совсем плохо
Хм, выглядит так, как будто решается в одну строчку в CSS. grid: repeat(auto-fill, minmax(a, b) в контейнере. Но я могу и ошибаться, конечно.
Css «карточки» в динамически генерируемом web документе — моя реализация