CSS 网格中仅显示一行并隐藏其他行

Question

我想仅显示网格的第一行并隐藏其他行。
我知道我们可以通过使用max-height和@media查询来做到这一点，但在这种情况下，网格中每个项目的高度应该相同。
但就我而言，网格中每个项目的高度不相同，因此当我使用上述解决方案时，它无法正常工作。
有没有办法将网格容器的 与第一行中的项目的max-height相同？max-height

Answer 1

我最近不得不解决同样的问题（行中项目的高度随屏幕尺寸而变化 - 因此无法轻松设置最大高度来切断它们）。

最后，我通过将此 CSS 添加到包含元素来操纵行的高度：

grid-template-rows: 1fr 0 0 0 0 0;
overflow: hidden;

基本上第一行将具有正常高度，后续行将具有零高度。我添加了足够的零来计算在最小屏幕尺寸上获得的最大行数（我的网格中有 6 个项目）。