Html 无网格模板行的单线网格布局hack

我想有一个项目的描述列表，通过使用CSS网格，它位于一行上，每个项目的宽度变化很小，当宽度变得太小而无法容纳时，它会隐藏每个项目

到目前为止，我已经提出了这个方法，它利用了

网格模板列的
自动填充
和
最小值
属性。目前，我有一点黑客隐藏的项目，将不适合。这是为了设置
溢出：隐藏
，但也可以在
网格模板行中相对于列表中的项目数设置大量
0
。如果删除
网格模板行
（并调整宽度），您将看到下面的溢出项

有没有一种方法可以隐藏这些溢出的元素，而不用硬编码大量的
0


div{
显示：内联块；
}
dl{
显示：网格；
网格模板列：重复（自动填充，最小值（10rem，1fr））；
栅柱间隙：20px；
网格模板行：1fr 0 0；
溢出：隐藏；
}
dd{
字体大小：粗体；
保证金：0；
}

列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
这不是一个不同的解决方案，但是使用
repeat（）
可以避免您必须写出一大堆
0
s

因此，使用
网格模板行：1fr repeat（50,0）改为：

或者，您可以将高度设置为
dl
，例如
80px
，并使用
网格模板行：重复（自动填充，80px）。如果内容的长度/高度可变，则此选项可能不可用


div{
显示：内联块；
}
dl{
显示：网格；
网格模板列：重复（自动填充，最小值（5rem，1fr））；
栅柱间隙：20px；
网格模板行：重复（自动填充，80px）；
溢出：隐藏；
高度：80px；
}
dd{
字体大小：粗体；
保证金：0；
}

列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
列名
示例值
寻求代码帮助的问题必须包含在问题中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看，是的，我认为这是对几个零的改进，尽管它仍然依赖于硬编码值。我觉得我正试图让Grid做一些它并没有真正打算做的事情，因此这是最好的解决方案。