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属性立即隐藏内容< em>在网格外面。

使用以下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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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;
  }
}

将网格行限制为指定的数字

2 个答案: