Search code examples
csscss-grid

How to stack elements in CSS Grid one on top of another?

I'm trying to stack elements one on top of another, using CSS Grid.

Here is my code.

const Wrapper = styled.div`
    border: 0.1rem black solid;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 10rem;

    img {
        width: 10rem;
        height: 10rem;
    }

    h2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    h3 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    h4 {
        font-style: italic;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    p {
        text-align: justify;
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
`;

const Card = () => {
    return (
        <Wrapper>
            <img src={img} alt="album" />
            <h2>Lorem Ipsum</h2>
            <h3>Sit Amet Consectetur</h3>
            <h4>
                Vero iusto distinctio natus esse quos incidunt nihil consectetur
                consequatur suscipit
            </h4>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                Delectus sit ex et, consectetur consequatur suscipit placeat ut
                corrupti facere voluptatem ratione, vero iusto distinctio natus
                esse quos incidunt nihil.
            </p>
        </Wrapper>
    );
};

h2, h3, h4 are overlapping one another... Here's how it looks in the Firefox DevTools...

DevTools

I want to stack h2, h3, h4 one on another, in order h2 -> h3 -> h4, at column 2 / 3 and row 1 /2 ... How do I do it ? Thanks

Solution

  • The h2, h3 and h4 are overlapping each other because that's what you told them to do.

    Here's your code:

    h2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

h3 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

h4 {
    font-style: italic;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

    You place all three elements in the same grid cell (grid-column: 2 / 3 / grid-row: 1 / 2), so they overlay each other.

    To make them stack vertically, here are two options:

    (1) You can wrap the headings in a container, which becomes the grid item, like this:

    Wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 10rem;
  border: 0.1rem black solid;
}

img {
  width: 10rem;
  height: 10rem;
}

section {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

h4 {
  font-style: italic;
}

p {
  text-align: justify;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}
    <Wrapper>
  <img src={img} alt="album" />
  <section>
    <h2>Lorem Ipsum</h2>
    <h3>Sit Amet Consectetur</h3>
    <h4>
      Vero iusto distinctio natus esse quos incidunt nihil consectetur consequatur suscipit
    </h4>
  </section>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus sit ex et, consectetur consequatur suscipit placeat ut corrupti facere voluptatem ratione, vero iusto distinctio natus esse quos incidunt nihil.
  </p>
</Wrapper>

    OR, (2) you can adjust your grid to provide rows for each heading. Something like this:

    Wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto 10rem;
  border: 0.1rem black solid;
}

img {
  grid-column: 1 / 2;
  grid-row: 1 / 5;
  width: 10rem;
  height: 10rem;
}

h2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

h3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

h4 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  font-style: italic;
}

p {
  grid-row: 4 / 5;
  grid-column: 1 / 3;
  text-align: justify;
}
    <Wrapper>
  <img src={img} alt="album" />
  <h2>Lorem Ipsum</h2>
  <h3>Sit Amet Consectetur</h3>
  <h4>
    Vero iusto distinctio natus esse quos incidunt nihil consectetur consequatur suscipit
  </h4>
  <p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus sit ex et, consectetur consequatur suscipit placeat ut corrupti facere voluptatem ratione, vero iusto distinctio natus esse quos incidunt nihil.
  </p>
</Wrapper>