小编Ing*_*nga的帖子

我有一个网格，其中填充了Vue中v-for循环中的元素。另外，我有一个搜索栏，可根据输入来减少网格元素。如果元素数大于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;
}