Для упорядочивания карточек существует несколько способов:
1. Использовать CSS свойство flexbox. Создайте контейнер с display: flex и задайте для карточек flex-grow или flex-basis, чтобы управлять их размером и позицией.
2. Использовать CSS свойство grid. Создайте контейнер с display: grid и определите сетку с помощью grid-template-rows и grid-template-columns. Затем указывайте в свойстве grid-row или grid-column, куда поместить каждую карточку.
3. Использовать JavaScript. Если вам нужен более сложный алгоритм расположения карточек, вы можете написать собственную функцию на JavaScript, которая будет управлять их позиционированием.
В отношении проблемы с белым отступом справа в контейнере, вы можете решить ее, добавив свойство flex-wrap: wrap для контейнера. Это позволит элементам переноситься на новую строку при переполнении контейнера.