Лучший подход для динамического отображения списка?

Question

Я работаю над приложением в React, которое использует магазин в качестве одной из своих основных функций, и мне нужна помощь по некоторым CSS (SCSS).

Моя проблема в том, что не только в этом проекте, но с самого началаКогда я начал реализовывать динамические списки объектов (div), у меня возникла та же проблема с отображением их. Является ли начальной загрузкой вариант?

Мой нынешний подход, который вроде как работает, заключается в установке

.itemsContainer{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .itemCard {
            flex:0 1 47%;
            height: 150px;
            margin-right:5%;
            margin-bottom:4%;
        }

        .itemCard:nth-child(4n){
               margin-right: 0;
          }

         .itemCard:not(:nth-child(4n)){
              margin-right: 2.5%;
          }
    }

Это моя настройка для медиазапроса на 1024 пикселей, я настраиваю дисплей на изгиб, а затем устанавливаю flex-wrapобернуть и оправдать, чтобы начать.

Затем, чтобы получить интервал, который я получу в justify-content:space-between, я добавляю поле справа для каждого элемента, который не равен 4n (потому что в этой строке 4 элемента для этой высоты, и я не хочуполе для последнего элемента в строке).

Это работает довольно хорошо, но мне нужно настроить его буквально для каждого медиазапроса, мне нужно в течение 5 минут поэкспериментировать, какая комбинация flex и margin подойдет ипосле этого есть даже несколько экранов, которые разрушают концепцию.

Основная проблема использования пробела - это крайний случай, если в строке из 4 элементов есть 1, 2 или 3 элемента, тогда они будут отображаться согромное пространство, между которым есть то, чего я не хочу.

Таким образом, моя идея заключалась в том, чтобы нацелить последние 3 элемента и каким-то образом установить их поле или отображение для гибкого начала, но это сработало бы, только если эти 3 (или менее) элемента находятся в отдельной строке.

Я действительно не имею ни малейшего представления о том, как подойти к этому, поэтому я надеюсь, что этот форум поможет мне. Заранее спасибо!

PS Я пытался использовать сетки, но я не мог сохранить исходное соотношение элементов, и каждые 4 строки высота элемента становилась бы немного меньше.