当屏幕尺寸太大时，HTML 网格会中断。如何确保我的网格在遇到更大尺寸时不会中断到下一行？

Question

目前我有一个如下所示的 HTML 网格：

当我的屏幕移动时，它看起来垂直整齐。一个p标题，一个表格，另一个p标题和表格。

拉伸后，它会移动到水平堆叠布局。 我在哪里 左边是配料名称，右边是配料。 在它的正下方看起来是一样的。

再次拉伸时，然后我将配料标题放在左边，配料列表，最右边的配料标题，然后下一行是下一组配料。我不希望它那样做。我希望它在拉伸时保持不变。

但是一旦它延伸得更远，它就会转到左边的成分标题，然后是成分列表，然后是第三列的成分标题，然后是第四列的成分

我尝试了各种值，但我真的不明白如何纠正这个问题。

    .ingredient {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     grid-gap: 1rem;
     padding-left: 5px;
     padding-right: 5px;
     }

Answer 1

如果您也向我们展示 html 就好了。

我建议您使用 flex，因为它确实是比网格更好的选择。

Bootstrap 有很好的类，允许您根据屏幕大小设置 flex 元素的宽度。

否则，您可以在包装 div（干和湿）上使用 width: 50%，这会强制页面将它们一个接一个地渲染。

对不起，我只能说这么多，没有更多信息。

希望有帮助。