введите описание изображения здесь
Здесь я пытаюсь использовать CSSGrid с grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); для контейнера сетки и для каждой карты, которую я использую.
grid-column: ${(props) =>
(props.size === 3 && "span 3") ||
(props.size === 2 && "span 2") ||
"span 1"};
Как вы можете видеть на картинке, потому что есть две карточки с индексом "Span 2" рядом друг с другом, так что остается странное пустое пространство. Мой вопрос: есть ли способ, чтобы последняя карта заполнила пустое место рядом с первыми картами Span 3 (без учета порядка индекса массива)