将网格行限制为指定数量[重复]

Question

是否可以强制网格仅呈现指定数量的行而忽略其余项目？ 在下面的示例代码中，我指定了repeat(3, 1fr)，所以无论它包含多少项，我只想渲染 3 行。 但这会导致 4 行：

.grid-constrain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-template-rows: repeat(3, 1fr);
}

.item-1 {
  text-align: center;
  background-color: blue;
}

.item-2 {
  text-align: center;
  background-color: pink;
}

<div class="grid-constrain">
  <div class="item-1">TEST 1</div>
  <div class="item-2">TEST 2</div>
  <div class="item-1">TEST 3</div>
  <div class="item-2">TEST 4</div>
  <div class="item-1">TEST 5</div>
  <div class="item-2">TEST 6</div>
  <div class="item-1">TEST 7</div>
  <div class="item-2">TEST 8</div>
  <div class="item-1">TEST 9</div>
  <div class="item-2">TEST 10</div>
  <div class="item-1">TEST 11</div>
  <div class="item-2">TEST 12</div>
</div>

Answer 1

是否可以强制网格只渲染指定数量的 行并忽略其余项目？

没有。

Grid Auto-placement | From MDN

CSS 网格布局规范包含控制发生情况的规则 当您创建网格并且不放置部分或全部子项时 项目。

如果网格在显式网格中没有足够的行来放置所有 的项目将创建新的隐式行。

隐式网格中自动创建的行的默认值是 它们是自动调整大小的。这意味着它们将包含内容 添加到它们而不会导致溢出。

但是，您可以使用该属性控制这些行的大小 网格自动行。

如果您无法更改 HTML，并且乐于在视觉上隐藏此内容，您可以将 grid-auto-rows 设置为 height: 0，并使用 overflow 属性现在隐藏内容外部 网格。

使用以下 CSS：

.grid-constrain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: repeat(3, 1fr);
    /* added */
    grid-auto-rows: 0px;
    overflow: hidden;
}

https://codepen.io/anon/pen/geNboO

.grid-constrain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: repeat(3, 1fr);
    grid-auto-rows: 0px;
    background: grey;
    overflow: hidden;
}

<div class="grid-constrain">
    <div class="item-1">TEST 1</div>
    <div class="item-2">TEST 2</div>
    <div class="item-1">TEST 3</div>
    <div class="item-2">TEST 4</div>
    <div class="item-1">TEST 5</div>
    <div class="item-2">TEST 6</div>
    <div class="item-1">TEST 7</div>
    <div class="item-2">TEST 8</div>
    <div class="item-1">TEST 9</div>
    <div class="item-2">TEST 10</div>
    <div class="item-1">TEST 11</div>
    <div class="item-2">TEST 12</div>
</div>

Answer 2

尝试使用尝试使用.grid-constrain>div:nth-child(n+3)

编辑：

在你的情况下，你可以使用：

@media (min-width: 601px) {
  .grid-constrain>div:nth-child(n+4){
    display: none;
  }
}

@media (max-width: 600px) {
  .grid-constrain>div:nth-child(n+2){
    display: none;
  }
}