css - 网格中嵌套的div不符合网格大小

Question

所以我试图在网格中显示卡片。我希望卡片大小基于网格大小，然后覆盖正确匹配宽度的文本。

这是我迄今为止的实施，但似乎div / img不再尊重网格尺寸

＆＃13;

＆＃13;

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
    	<div>
        <img src="http://via.placeholder.com/250x350" />
        <div class="text">
          sadfsd
        </div>
			</div>
    </div>
  `);  
}

＆＃13;

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;
}

.item {
  display: inline-block;               
  text-align: center;                    
  position: relative;
}

.inner {
  border: 1px solid red;
  max-height: 100%;
  max-width: 100%;

  
}

.text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  height: 30%;
  border: 1px solid black;
  width: 90%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我想要的是它看起来像这样（当然文本与图像的宽度相匹配）

＆＃13;

＆＃13;

for (let i = 0; i < 15; i++)
{
  $("#grid").append(`
    <div class="item">
      <img src="http://via.placeholder.com/150x350" />
      <div class="text">
        text
      </div>
    </div>
  `);  
}

＆＃13;

.flex {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.footer {
  height: 20%;
}
.upper {
  flex: 1;
  overflow: auto;
}

#grid {
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  position: relative;
  max-width: 100%;
  box-sizing: border-box;                  /*  added  */
}

.item {
  position: relative;
}

.text {
  border: 1px solid black;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 30%;
}

img {
  display: block;                         
  margin: 0 auto;                         
  max-height: 100%;
  max-width: 100%;           
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="flex">
  <div class='upper'>
    <div id="grid">
    </div>  
  </div>
  <div class="footer">
    footer
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;