Grid item is taking full screen width when it doesn't have any siblings

Question

So I have this grid where I am displaying 3 items per row and is looking perfectly fine even on small screens. But the issue arises when an item doesn't have any siblings. I mean when he is alone, he takes up full screen width which looks super ugly in big screens.

Now I could fix it if I knew the number of grid items but as the data is dynamic I don't have any way of knowing it. So it could be 1 now and 100 later.

So what I am trying to achieve when there is only one item is, it should take the same space as it takes when there are 3. But also keeping the responsiveness and look as shown in the snippet below as it is.

Here's a snippet when there are 3 in a row:

.container {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}

.item {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
}

<div class="container">

  <div class="item">
    1
  </div>

  <div class="item">
    2
  </div>

  <div class="item">
    3
  </div>

  <div class="item">
    4
  </div>

  <div class="item">
    5
  </div>

</div>

Here's a snippet when I have only one item:

.container {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}

.item {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
}

<div class="container">

  <div class="item">
    1
  </div>

</div>

How can I fix this?

Try changing `auto-fit` to `auto-fill` – aerial Nov 23 '21 at 15:15 — aerial, Nov 23 '21 at 15:15
Oh man you're a genius. Post it as an answer – s.khan Nov 23 '21 at 15:35 — s.khan, Nov 23 '21 at 15:35

score 3 · Accepted Answer · answered Nov 23 '21 at 16:08

From MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()

auto-fit Behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed.

So using auto-fill instead will prevent items from stretching since empty tracks are not collapsed.

.container {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 10px;
}

.item {
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: blue;
}

<div class="container">

  <div class="item">
    1
  </div>

</div>

Grid item is taking full screen width when it doesn't have any siblings

1 Answers1