Html 网格宽度列-Css

我有一个100%的网格，有4列。 有些尺寸我希望是3号。 我尝试更改CSS，使宽度为25% 在一定的屏幕尺寸范围内，使用CSS的最小值为33.33%。 在网格中，我制作了CSS

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

但它是以这样一种方式呈现的：

1   2   3 
4
5   6   7
8

我想要一个特定的屏幕尺寸范围， 它将是响应性的，并且将是这样：

100% = 1  2  3  4  
       5  6  7  8

在某些屏幕大小中：

1  2  3 
4  5  6
7  8

我在Elementor工作，这两条线是分开的 如果它改变了什么

---

有什么帮助吗？

在这里使用网格，不要使用

%

而是使用

fr

单元

如果你需要4列

grid-template-columns: repeat(4, 1fr); // 4 columns

否则，如果需要3列

grid-template-columns: repeat(3, 1fr); // 3 columns

只需调整浏览器大小，就可以看到不同之处

.grid容器{
保证金：1rem；
显示：网格；
网格模板列：重复（4，1fr）；//4列
网格间距：1rem；
}
.表格项目{
背景颜色：棕色；
高度：100px；
颜色：白色；
}
@仅介质屏幕和（最大宽度：600px）{
.网格容器{
网格模板列：重复（3，1fr）；//3列
}
}

1.
2.
3.
4.
5.
6.
7.
8.

特性isspace通常以以下方式之一实现：它使用int类型的参数作为表中256个值（从0到255）的索引。如果int类参数的成本大于最大费用255或较差的值（与宏EOF的费用不同），则特征的行为未定义。

我希望它以百分比为单位。我有两个部分，一个在另一个下面，在这台计算机上显示为4列。在较小的屏幕（比平板电脑大）上，它看起来不太好，我希望显示3列。宽度设置为大约25%，我尝试使用CSS在我想要的范围内将大小更改为最小33.33%，但它隐藏了每行的第四列。我希望每行显示3个，在一定的屏幕大小范围内。显示器：flex；弯曲方向：行；柔性包装：包装；但它是这样呈现的：1 2 3 4 5 6 7 8像这样