Display only one row and hide others in CSS Grid

Question

I want to show only the first row of the Grid and hide other rows.
I know we can do this by using max-height and the @media queries, but in this case, the height of each item in the grid should be the same.
But in my case, the height of each item in the grid is not the same, so when I use above solution, it doesn't work correctly.
Is there any way to set the max-height of the grid container the same as the max-height of the items in the first line?

Mcmillen

Can you add your code? – Manado

Answer 1

I recently had to solve the same problem (the height of the items in the row varied with screen size - so couldn't easily set a max-height to cut them off).

I the end I manipulated the height of the rows by adding this CSS to the containing element:

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

Basically the 1st row will have normal height and subsequent rows will have zero height. I added enough zeros to account for the max number of rows I would get on the smallest screen size (I had 6 items in my grid).

Perryperryman

Answer 2

I needed to be able to toggle showing all rows in the grid with only showing the first row. It's possible to achieve this by using a combination of grid-template-rows and grid-auto-rows. Basically, define the first row using grid-template-rows (or however many rows you want to be visible) and set grid-auto-rows to be zero (this will give all subsequent rows a height of zero). Also, ensure you remove any padding, row gap, and set overflow to hidden.

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

Walz

Answer 3

This is the SCSS

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;

  .grid-item {
    display: none;

      &:first-child {
        display: block;
      }
  }
}

HTML code

<div class="grid">
  <div class="grid-item>Row 1</div>
  <div class="grid-item>Row 2</div>
  <div class="grid-item>Row 3</div>
</div>

Iphagenia

Answer 4

you can hide the other siblings except first using :not selector & :first-child pseudo-class as argument of :not selector.

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

.hide-subsequent-rows > div:not(:first-child){
  display:none;
}

<div class="my-grid hide-subsequent-rows">
  <div> Item 1 </div>
  <div> Item 2 </div>
  <div> ... </div>
  <div> Item N </div>
</div>

Unlikelihood