Trying to implement a layout using css grid but have some issues where title of .inner-grid > h6
overlaps with text .inner-grid > p
, you can see it here: https://codepen.io/anatoly314/pen/abKjxPG?editors=1100
What am I doing wrong? Thank you!
<div >
<h2>Title</h2>
<div >
<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 >
<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;
}
CodePudding user response:
You're putting your h6
and p
on the same grid cell. That makes them overlap.
It seems you're having some misunderstanding about how grid operates. I suggest you read this article to better understand its mechanism: https://css-tricks.com/snippets/css/complete-guide-grid/