Html 如何隐藏隐式网格行？

下面的代码段使用CSS网格增加宽容器的列数。对于窄容器（例如，取消注释

width:80vw

或调整示例大小），它会添加隐式行（在

网格模板行

属性中只有2行是显式的）。如何仅维护2行，使“溢出”2×n网格的网格项隐藏

.wrapper{
边框：2px实心#f76707；
背景色：#fff4e6；
显示：网格；
/*宽度：80vw*/
网格模板列：重复（自动填充，200px）；
网格模板行：重复（2，1fr）；
}
.wrapper>div{
边框：2px实心#ffa94d；
边界半径：5px；
背景色：#ffd8a8；
填充：1em；
颜色：#d9480f；
}

一个
两个
三
四
五

不能阻止创建隐式行（），但可以在容器上设置高度并隐藏溢出

.wrapper{
显示：网格；
网格模板列：重复（自动填充，200px）；
最大高度：110px；
溢出：隐藏；
边框：2px实心#f76707；
背景色：#fff4e6；
}
.wrapper>div{
边框：2px实心#ffa94d；
边界半径：5px；
背景色：#ffd8a8；
填充：1em；
颜色：#d9480f；
}

一个
两个
三
四
五

您可以使用

网格自动行：0将自动生成行的高度设置为
0px
并使用
overflow-y:hidden
隐藏它们。演示：


.wrapper{
边框：2px实心#f76707；
背景色：#fff4e6；
显示：网格；
网格模板列：重复（自动填充，200px）；
网格模板行：重复（2，1fr）；
栅格自动行：0；/*对于自动生成的栅格行，将高度设置为0*/
溢出-y：隐藏；/*隐藏溢出的网格项*/
}
.wrapper>div{
边框：2px实心#ffa94d；
边界半径：5px；
背景色：#ffd8a8；
填充：1em；
颜色：#d9480f；
}

一个
两个
三
四
五
六
七
八
九
十
网格项具有不同的高度？不是在一行内，而是在具有不同内容的网格之间。如果在该解决方案中使用网格间距，则会得到错误的结果。隐藏行的顶部（与栅格间距值相同）将可见。这可以通过使用列间距来解决，并通过在网格中的项目中添加边距底部来修复“行间距”。这是一个很酷的解决方案，在一些罕见的用例中非常方便。因为我对我的网格子项使用了一些flexbox，所以我必须对子项使用
overflow-y:hidden
，以防止更多的溢出