如何显示具体编号CSS网格中的行数？答案

【问题标题】：How display specific no. of rows in css grid?如何显示具体编号CSS网格中的行数？
【发布时间】：2020-02-11 15:07:17
【问题描述】：

我正在使用 CSS 网格 来显示 5 张卡片。卡片在桌面的单行中完美对齐。但是，当我切换到移动设备时，它们会按照下面的图片显示。

是否可以在 CSS 网格中指定只显示两行。

【问题讨论】：

您的意思是您需要在移动设备中隐藏 div 5 吗？
你真的不能，因为 CSS-Grid 会为任何包装创建 implicit 行。在移动设备上，每行应该有多少项？
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
可能与这个问题有关：stackoverflow.com/questions/43662552/… 如果您想隐藏第 5 个元素，只需在媒体查询中设置“display: none”即可。
@VinaySharma 显示你的代码

【解决方案1】：

您不能只指定 2 行 但您可以尝试将最后一行设置为 minmax(0,0) 值，而 overflow:hidden; ... 隐藏它们：

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  overflow: hidden;
  grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(0px, 0); /* third-row won't show, next might , grid-gap will increase height of section if set */
}

section {
  counter-reset: divs;
}

div {
  border: solid;
}

div:before {
  counter-increment: divs;
  content: counter(divs)
}
p:before {
color:red;
  content: counter(divs)
  }

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<p> boxes are standing here </p>

这隐藏了第三行，如果更多，则会显示一些元素，因为 grid-gap 集合将为每个额外的行增加 height。

您可以使用margin 代替grid-gap 并为每个额外的行添加以隐藏grid-template-rows 的mimax(0,0) 值。

下面的另一个演示显示了单行（共 7 个）和 2 个框（共 14 个）。

section {counter-reset:divs;}
div {border:solid;margin:0.5em;}
div:before {counter-increment:divs;content:counter(divs)}

section {
  display:grid;
  grid-template-columns:1fr 1fr;   
  overflow:hidden;
  grid-template-rows: 
    minmax(100px,1fr) /* row to be seen */
    minmax(0,0)
    minmax(0,0)
    minmax(0,0)  
    minmax(0,0) 
    minmax(0,0)  
    minmax(0,0)  ;/* 7 rows values set , 6 rows can be hidden */
}

p:before {
color:red;
  content: counter(divs)
  }

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
</section>
<p> boxes are standing here.</p>

demo (hide/show) so many rows

【讨论】：

嗨，这没有按预期工作，因为如果我也尝试隐藏第二行，第二行会显示一点点并且没有完全隐藏。
@VinaySharma 删除网格间隙并改用边距。 ;) 就像我解释这个案例的第二个例子一样。我将编辑第二个 sn-p 示例以显示单行。
感谢您分享这一点。实际上我使用的是grid-gap: 10px，它在水平和垂直方向上都添加了一个间隙，而不是使用grid-gap: 0 10px，它现在只在水平方向上应用。
@VinaySharma 太好了，我从上一个 sn-p 中做了一个演示，您可以在其中选择要显示/隐藏的行数。 codepen.io/gc-nomade/pen/PoqNoxg
嘿，非常感谢。这是一项了不起的工作！好吧，如果你能帮助我，我已经发布了另一个问题:) stackoverflow.com/q/60238044/11220479

【解决方案2】：

您可以使用 css。您可以创建一个 mobile-display-none 类，该类将在特定断点处隐藏您的内容。或者，如果您从数组接收此数据，您可以修改数组或在代码中指定项目应呈现到的索引。但是，您也需要一个断点，所以我会直接使用 css @media 屏幕。如果您想将第 5 个 div 作为该行中的第三个元素，您可能需要调整网格。

【讨论】：

【解决方案3】：

只需隐藏最后一个元素，以防网格换行。我做了一个工作示例。

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
</div>

.wrapper {
  display: grid;
  grid-auto-flow: column;
}

.wrapper {
  display: grid;
  grid-auto-flow: column;
}

@media only screen and (max-width: 800px) {
  .wrapper {
      grid-auto-flow: row;
      grid-template-columns: repeat(2, minmax(300px, 500px));
  }
  .e{
    display: none;
  }
}

小提琴：https://jsfiddle.net/k2zLqx1d/

【讨论】：

嗨，我的要求是为所有 div 提供通用类。假设我有 100 个这样的 div，那么将类名指定为 a、b、c、d.. 等等都是不可行的。