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

ffx8fchx  于 2023-06-29  发布在  React
关注(0)|答案(2)|浏览(165)

我想只显示网格的第一行,隐藏其他行。
我知道我们可以通过使用max-height@media查询来做到这一点,但是在这种情况下,网格中每个项目的高度应该是相同的。
但是在我的例子中,网格中每个项目的高度是不一样的,所以当我使用上面的解决方案时,它不能正确工作。
有没有办法将网格容器的max-height设置为与第一行中项目的max-height相同?

jhiyze9q

jhiyze9q1#

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

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

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

bq3bfh9z

bq3bfh9z2#

我需要能够切换显示在网格中的所有行,只显示第一行。可以通过使用grid-template-rowsgrid-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>

相关问题