如何在CSS网格中将元素堆叠在另一个之上？

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彼此重叠...这是在Firefox DevTools中的外观...

我想依次堆叠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>