Home > Software engineering >  Trying to implement layout using css grid layout but have some issues where text overlapped
Trying to implement layout using css grid layout but have some issues where text overlapped

Time:11-30

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/

  • Related