CSS grid make siblings items stretch-CodePudding

I wanna stretch the small image to the big image height like the below image:

I have tried align-items: stretch;, justify-content: stretch;, align-content: stretch;, justify-items: stretch;, and assign height: 100%; to the images, but all of these not working...I don't know why...

And my second question is that there should be only two rows, I don't understand why grid-row: 1 / 2; is not working but grid-row: 1 / 4; is working...

#main {
  align-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  width: 500px;
}

#big {
  grid-column: 2 / span 2;
  grid-row: 1 / 4;
}

#main img {
  width: 100%;
  height: 100%;
}

<div id="main">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img id="big" src="https://dummyimage.com/1000x1000/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
</div>

CodePudding user response：

Change grid-row from 1 / 4 to 1 / 3:

#main {
  align-items: stretch;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 500px;
}

#big {
  grid-column: 2 / span 2;
  grid-row: 1 / 3;
}

#main img {
  width: 100%;
  height: 100%;
}

<div id="main">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img id="big" src="https://dummyimage.com/1000x1000/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
</div>

CodePudding user response：

You can also use grid-area: span 2/span 2

#main {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4,minmax(0,1fr));
  width: 500px;
}

#big {
  grid-area: span 2/span 2;
}

#main img {
  width: 100%;
  height: 100%;
}

<div id="main">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img id="big" src="https://dummyimage.com/1000x1000/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
  <img src="https://dummyimage.com/500x200/e3e3e3/000000">
</div>