我只想显示 Grid 的第一行并隐藏其他行。
我知道我们可以通过使用max-height和@media查询来做到这一点，但在这种情况下，网格中每个项目的高度应该相同。
但在我的情况下，网格中每个项目的高度是不一样的，所以当我使用上述解决方案时，它不能正常工作。
有没有办法将网格容器的 设置为与第一行中的项目max-height相同？max-height
在 CSS Grid 中仅显示一行并隐藏其他行
IT技术
html
css
reactjs
css-grid
2022-07-23 00:35:06
1个回答
我最近不得不解决同样的问题（行中项目的高度随屏幕尺寸而变化 - 所以不能轻易设置最大高度来切断它们）。
最后，我通过将此 CSS 添加到包含元素来操纵行的高度：
grid-template-rows: 1fr 0 0 0 0 0;
overflow: hidden;
基本上第一行将具有正常高度，后续行将具有零高度。我添加了足够的零来说明我在最小屏幕尺寸上可以获得的最大行数（我的网格中有 6 个项目）。