我最近不得不解决同样的问题（行中项目的高度随屏幕大小而变化-所以不能轻松地设置最大高度来切断它们）。
最后，我通过将以下CSS添加到包含元素来操纵行的高度：

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

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

我需要能够切换显示在网格中的所有行，只显示第一行。可以通过使用grid-template-rows和grid-auto-rows的组合来实现这一点。基本上，使用grid-template-rows定义第一行（或者您希望可见的任何行），并将grid-auto-rows设置为零（这将给予所有后续行的高度为零）。此外，请确保删除所有填充和行间距，并将溢出设置为隐藏。

.my-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(162px,1fr));
  gap: 12px;
  row-gap: 20px;
  padding: 12px;
}

.hide-subsequent-rows {
  grid-template-rows: 1fr;
  grid-auto-rows: 0;
  padding-bottom: 0;
  row-gap: 0;
  overflow: hidden;
}

HTML：

<div class="my-grid hide-subsequent-rows">
  <div> Item 1 </div>
  <div> Item 2 </div>
  <div> ... </div>
  <div> Item N </div>
</div>