Question 237532 in Html Question posted in
Some basic documentation can be found here.

Html – How can I keep a CSS Grid height to exactly 3 rows

I’d like to keep it at a height of 3 rows, regardless of how many items are in the grid. The grid should scroll if there are more than 3 rows worth of content. How can I do this, without manually setting the height to X pixels?

I have a grid like this:

const grid = document.getElementById("grid");
for (let i = 1; i <= 9; i++) {
  const item = document.createElement("div");
  item.innerHTML = i;
  grid.appendChild(item);
}
#grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 300px;
  border: 3px solid blue;
  overflow-y: scroll;
}

#grid>div {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
}
<div id="grid">
</div>
Tags:

2

Answers


  1. 0

    I wonder if grid-auto-flow: column would suit your needs:

    The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. (MDN)

    column: Items are placed by filling each column in turn, adding new columns as necessary. (MDN)

    const grid = document.getElementById("grid");
for (let i = 1; i <= 25; i++) {
  const item = document.createElement("div");
  item.innerHTML = i;
  grid.appendChild(item);
}
    #grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column; /* ADDED THIS */
  width: 300px;
  border: 3px solid blue;
  overflow: none;
  overflow-x: scroll;
}

#grid > div {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
}
    <div id="grid"></div>
    Login or Signup to reply.
  2. 0

    There is no way to structure CSS Grid to show only a certain number of rows. The height of the container must be restricted before the content can overflow the boundary. The height will have to be calculated based on the height of the cells/rows.

    For this particular example, the height of the grid can be set by declaring the same aspect ratio that you have for div.

    #grid {
  aspect-ratio: 16 / 9;
  overflow-y: scroll;
}

#grid > div {
  aspect-ratio: 16 / 9;
}

    const grid = document.getElementById("grid");
for (let i = 1; i <= 15; i++) {
  const item = document.createElement("div");
  item.innerHTML = i;
  grid.appendChild(item);
}
    * {box-sizing: border-box}

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 300px;
  aspect-ratio: 16 / 9;
  border: 3px solid blue;
  overflow-y: scroll;
}

#grid > div {
  display: grid;
  place-content: center;
  aspect-ratio: 16 / 9;
  background-color: #ccc;
}
    <div id="grid"></div>

    To compensate for the row gaps, a calculation would need to be used for height instead of using aspect-ratio.

    #grid {
  height: calc(300px * 9 / 16 - 4px);
}

    I’m not sure if the given width of the grid and aspect ratio of the cells is what you are actually using or if it was just to create boxes for this example. Essentially, the height of the rows must be known in order to calculate the height of three rows for the height of the grid.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search