CODEWITHSUNDEEP
htmlcsscss-grid
Anatoly
Anatoly

Reputation: 5241

Trying to implement layout using css grid layout but have some issues where text overlapped

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 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;
}

Upvotes: 0

Views: 21

Answers (1)

Wolfeur
Wolfeur

Reputation: 142

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/

Upvotes: 1

Related Questions