Привет, делаю свой первый пет проект на реакте, опыта мало, проект показывает гифки с api giphy.com,
запрос, появление гифок - это все работает, только они просто в одном контейнере, li в одном ul. И выглядит это просто ужасно, пробовал стилизовать гридами, но один ряд гридов брал высоту самой высокой гифки, то есть у самой маленькой еще пустое место снизу оставалось. Я хочу сделать так чтобы был не один контейнер а несколько в зависимости от того сколько столбцов будет на экране. Я это примерно вижу так, приходит объект с сервера, я смотрю его длину, смотрю ширину вьюпорта у пользователя, беру ширину гифки и ее марджинов, делю ширину вьюпорта на ширину картинки, округляю - получаю количество столбцов, беру количество гифок в объекте делю на количество столбцов - получаю количество гифок в одном столбце, теперь мне надо во время отрисовки динамически менять класс у контейнера куда записываются гифки, например 4 столбца по 5 гифок (допустим) класс контейнера - "контейнер", в него записалось 5 гифок, его имя меняется на "контейнер2" и тд, но как отследить количество записаных li в ul, чтобы функция динамически меняла имя класса контейнера я чет не понял, вот файлы с гитхаба:
app.js:
https://github.com/N4sky1/Gifs/blob/master/src/App.js
giflist.js:
https://github.com/N4sky1/Gifs/blob/master/src/com...
Тут как раз я и пытаюсь это сделать
gif.js:
https://github.com/N4sky1/Gifs/blob/master/src/com...
Может это можно сделать как нибудь по другому я не знаю, буду благодарен за любую помощь и комментарии, спасибо.
Простой