Constrain grid rows to specified number [duplicate]

Question

Is it possible to force the grid to only render specified number of rows and ignore the rest of the items? In the example code below I specify repeat(3, 1fr), so I want to only render 3 rows no matter how many items it contains. But this results in 4 rows:

.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

Is it possible to force the grid to only render specified number of rows and ignore the rest of the items?

No.

Grid Auto-placement | From MDN

The CSS Grid Layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items.

If the grid does not have enough rows in the explicit grid to place all of the items new implicit rows will be created.

The default for automatically created rows in the implicit grid is for them to be auto-sized. This means that they will contain the content added to them without causing an overflow.

You can however control the size of these rows with the property grid-auto-rows.

If you are unable to alter the HTML, and are happy to visually hide this content, you could set grid-auto-rows to height: 0, and use the overflow property to hide content now outside the grid.

Use the following 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

try using try using .grid-constrain>div:nth-child(n+3)

edit:

in you case, you can use:

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