如何限制自动填充或自动调整列的总宽度？

Question

是否有一种方法可以限制具有自动调整和自动填充功能的CSS网格的宽度，而又不影响其响应速度？还是有更好的使用方法？

使用下面的CSS，我有7个控件都适合放在一行中，我想将其分成两行而不影响响应速度，其想法是如果我限制自动适应行的宽度。

我尝试使用'width：px'，但这会破坏响应能力。

一个部分的代码：

.Search {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fit, 200px);
    align-items: end;
}

我可以将其分为多个html部分，但这会留下空白。

多个部分的代码：

.Search, .SchoolID {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(auto-fit, 200px);
    align-items: end;    
}

包含多个部分的屏幕截图。

在特定的屏幕分辨率下，第2行第2列为空白，因为下一项从不同的部分开始。其他所有决议都可以在多个部分中使用，但我也想解释一下该决议。如果可能的话，我希望无需使用多个html部分就可以解决这个问题。

Answer 1

在您的代码中添加一个max-width值即可解决此问题。