Html 如何通过这个CSS网格自动填充实验来停止断线

尝试理解CSS网格的第一步

您将看到，当您扩大显示范围时，这会在一行显示的文本“客户机代码”之间切换。。。发生断线。。。一行。。。换行符。。。一行。。。等等

.grid容器{
显示：网格；
网格模板列：重复（自动填充，最小值（100px，1fr））；
边框：0.5px纯品红色；
}
.柔性显示器{
显示器：flex；
边框：0.5px纯绿色；
}
.dbForm*{
字体大小：x-small；
}
.dbForm非表{
保证金：2倍；
填充：2px；
边框：0.5px实心#000000；
溢出：自动；
背景色：#ffec80；/*浅金色*/
最小高度：10px；
最小宽度：30px；
}
.dbForm标签{
保证金：2倍；
填充：2px；
溢出：自动；
最小高度：10px；
}

日期：
笨嘟嘟
客户端代码：
渡渡鸟
笔记：
纳布尔

您正在寻找的是

自动安装

，而不是

自动填充

：

我发现了一个很好的解释：

自动填充

用尽可能多的列填充行。因此，只要新列可以容纳，它就会创建隐式列，因为它试图用尽可能多的列填充行。新添加的列可以是空的，也可以是空的，但它们仍将占用行中的指定空间

auto-fit

通过展开当前可用的列，使其占据所有可用空间，从而将其安装到空间中。浏览器在用额外的列填充额外的空间（如

自动填充

）后执行此操作，然后折叠空列

.grid容器{
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
边框：0.5px纯品红色；
}
.柔性显示器{
显示器：flex；
边框：0.5px纯绿色；
}
.dbForm*{
字体大小：x-small；
}
.dbForm非表{
保证金：2倍；
填充：2px；
边框：0.5px实心#000000；
溢出：自动；
背景色：#ffec80；/*浅金色*/
最小高度：10px；
最小宽度：30px；
}
.dbForm标签{
保证金：2倍；
填充：2px；
溢出：自动；
最小高度：10px；
}

日期：
笨嘟嘟
客户端代码：
渡渡鸟
笔记：
纳布尔

寻求代码帮助的问题必须包含在问题中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参见。@connexo当网格从3个框（每个框都有标签和DIV）扩展到更宽时，您可以清楚地看到第四个、第五个、第六个等“分数”（“1fr”）被引入到3个实际DIV的右侧。这就是造成挤压的原因。我想阻止那些“虚构的”分数/div被引入。最好从尽可能窄的地方开始。洋红色的盒子显示了这些想象中的盒子占据空间的方式。谢谢。您的解决方案的问题在于它没有响应：即使在移动屏幕宽度上显示，您也总是有3列。遇到我遇到的问题的人不会通过搜索找到其他问题，但可以想象，他们可能会找到这个问题。-->这就是复制品的目的。有人会发现你的问题，然后duplicate@Temani如果是，则为true，但如果我删除它，则不会，因为我被邀请使用红色字体的链接“delete”。考虑到它已经有了答案，如果这真的有效，我会感到惊讶，但我不会尝试。先生，你是个天才。还有两票就要结束了，我开始怀疑我是否又问了一个愚蠢的CSS问题。也许我的疯狂是有办法的。