如何在CSS Grid中一个又一个地堆叠元素？

我正在尝试使用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,h4,顺序为h2-> h3-> h4,位于第2/3列和第1/2行…该怎么办？谢谢

最佳答案

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,vero iusto distinctio natus esse quos incidunt nihil.
  </p>
</Wrapper>