CSS: Как изменить сетку дисплея для условного сгибания с помощью селекторов CSS?

Question

У меня есть сетка, которая заполнена элементами из цикла v-for в Vue.Кроме того, у меня есть панель поиска, которая уменьшает элементы сетки на основе ввода.Если количество элементов больше 3, то это выглядит великолепно, но когда я оставил только 2 элемента, оно слишком разнесено.Поэтому я бы хотел изменить отображение: grid;для отображения: flex;если элементов в сетке меньше 3.

Я пробовал с помощью селекторов CSS, возможно, я делаю что-то не так, так как я довольно новичок в программировании.Я знаю, как добавить динамический класс, используя javascript, однако я хотел бы посмотреть, будет ли это возможно с простым CSS.

Попробовал следующий селектор CSS и его варианты:

.grid-container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(290px, 1fr) );
    grid-gap: 3rem;

}

.grid-container:first-child:nth-last-child(n + 2) {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: auto;
    align-content: center;
}