在构建嵌入式css网格时，我面临着意想不到的缺口.
布局由卡片组成(每行3张卡片)，每个卡片子元素(在我的例子中是橙色/灰色/黑色)必须彼此对齐(在同一行中).行的预期最大高度应基于其单元格的内容.但高度比细胞内容大得多:
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.card {
display: grid;
grid-row-gap: 10px;
grid-auto-rows: 1fr;
}
.header {
background-color: orange;
}
.content {
background-color: grey;
}
.footer {
background-color: black;
color: white;
}<div class="cards">
<div class="card">
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="content">
<img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 10%" />
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card">
<div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
<div class="content">
<img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 15%" />
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card">
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="content">
<img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 20%" />
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card">
<div class="header"> Cras imperdiet erat ante. Suspendisse eget egestas felis. Cras justo sapien, venenatis et lectus vitae, finibus accumsan ex.</div>
<div class="content">
<img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 25%" />
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="card">
<div class="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="content">
<img src="https://pbs.twimg.com/profile_images/1220067947798024192/30eZhfxx_400x400.png" style="width: 30%" />
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>我必须对这个布局进行哪些修改才能避免出现这些意外的间隙？