Как складывать элементы в CSS Grid один поверх другого?

Question

Я пытаюсь сложить элементы один поверх другого, используя CSS Grid.

Вот мой код.

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 перекрывают друг друга ... Вот как это выглядит в DevTools Firefox...

Я хочу сложить h2, h3, h4 друг на друга, в порядке h2 -> h3 ->h4, в столбце 2/3 и строке 1/2 ... Как мне это сделать?Спасибо

Answer 1

h2, h3 и h4 перекрывают друг друга, потому что это то, что вы им сказали.

Вот ваш код:

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

Вы размещаете всетри элемента в одной ячейке сетки (grid-column: 2 / 3 / grid-row: 1 / 2), поэтому они перекрывают друг друга.

Чтобы расположить их вертикально, есть два варианта:

(1) Вы можете заключить заголовки в контейнер, который станет элементом сетки, например:

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>

ИЛИ (2) вы можете настроить сетку, чтобы обеспечить строки для каждого заголовка.Примерно так:

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>