尝试使用css网格布局实现布局，但有一些问题，其中文本重叠

Question

尝试使用css网格实现布局，但有一些问题，其中.inner-grid > h6的标题与文本.inner-grid > p重叠，你可以看到它在这里:https://codepen.io/anatoly314/pen/abKjxPG?editors=1100

我做错了什么?谢谢你！

<div class="outer-grid">
<h2>Title</h2>
<div class="inner-grid">
<figure>
<img src="https://img.icons8.com/ios-glyphs/512/networking-manager.png" alt="" width="34" height="46">
</figure>
<h6>QA – – Value Creation for Corporates</h6>
<p>We supports portfolio management, financial overview, board placement for corporates, commercial collaborations
and provides early access to follow on rounds and investment opportunities</p>
</div>
<div class="inner-grid">
<figure>
<img src="https://img.icons8.com/ios-glyphs/512/networking-manager.png" alt="" width="34" height="46">
</figure>
<h6>QA – – Value Creation for Corporates</h6>
<p>We supports portfolio management, financial overview, board placement for corporates, commercial collaborations
and provides early access to follow on rounds and investment opportunities</p>
</div>
</div>

.outer-grid{
max-width: 500px;
display: grid;
grid-auto-rows: 1fr;
grid-template-rows: auto;
}
.outer-grid > h2 {
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
text-align: center;
font-size: 32px;
}
.inner-grid{
display: grid;
grid-template-rows: auto;
grid-template-columns: auto;
}
.inner-grid > figure{
height: 60px;
width: 60px;
padding: 0 20px 0 0;
}
.inner-grid > h6 {
grid-row: 1;
grid-column: 2;
margin: initial;
font-family: Open Sans;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
}
.inner-grid > p {
padding-top: 2rem;
grid-row: 1;
grid-column: 2;
font-family: Open Sans;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
}

Answer 1

你把你的h6和p在同一个网格单元。这使得它们重叠。

看来你对网格的运作方式有一些误解。我建议您阅读本文以更好地理解其机制:https://css-tricks.com/snippets/css/complete-guide-grid/