[FIXED] How to stop grid item from stretching?

Issue

I have this simple grid:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}

<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

As you can see, I've defined the grid-gap to be 40px, but each grid item stretches horizontally as page width changes. I'd like the item to not stretch and simply occupy full space, so both vertical and horizontal gaps are 40px to form a nice 3*3 grid. How to achieve that?

Solution

Use auto instead of 1fr and align the content:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, auto);
  place-content: start;
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}

<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answered By - Temani Afif

Answer Checked By - Marie Seifert (PHPFixing Admin)