Question

我是CSS网格的新手。

我的问题是，当我在包含两个纯段落display: grid;的父元素上设置<p>时，这些段落彼此重叠，而不是通常一个一个地堆叠在一起。使容器扩大高度。

两个问题：

为什么会这样？
如何解决此问题以使段落正常运行（堆叠）？

div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "avatar name   icon" "avatar date   date" "review review review";
  border: red 1px solid;
}

h3 {
  grid-area: name;
  margin: 0;
}

.svg-icon {
  grid-area: icon;
}

.date {
  grid-area: date;
}

p {
  grid-area: review;
}

<div>
    <img src="https://via.placeholder.com/50" alt="">
    <h3>Gene Kang</h3>
    <span class="date">December 29, 2016</span>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi harum, voluptatum perferendis dicta error blanditiis ipsum in nemo expedita delectus. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae in eius necessitatibus, impedit sapiente cupiditate laudantium perspiciatis neque dolore sequi laborum quo iure facere nobis minima, numquam illo sunt unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, maiores consectetur laboriosam distinctio libero pariatur at quasi aliquam ipsam provident eligendi eos quibusdam animi sapiente iste beatae ducimus cum temporibus unde, nobis totam odio sed ab! Voluptate soluta explicabo harum? Non, rerum nulla repellat hic sapiente culpa modi quo esse!</p>
    <img src="https://via.placeholder.com/20" alt="" class="svg-icon">
</div>

这是一个CodePen演示：https://codepen.io/ricardozea/pen/7869598aa71d7345550f351b00080fac?editors=1100

Answer 1

我认为您只是忘了将段落放入一个div中并给该div提供了审阅网格区域，因此这两个段落被视为一个元素，并且它们不会相互重叠。这是小提琴。

//Main wrapper
.grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
			"avatar name   icon"
			"avatar date   date"
			"review review review";
    border: red 1px solid;
}
//Avatar
.avatar {
  grid-area: avatar;
}
//Name
h3 {
    grid-area: name;
    margin: 0;
}
//Icon
.svg-icon { grid-area: icon; }
//Date
.date { grid-area: date; }
//Review
.review { grid-area: review; }

<div class="grid">
    <img src="https://via.placeholder.com/50" alt="" class="avatar">
    <h3>Gene Kang</h3>
    <span class="date">December 29, 2016</span>
    <div class="review">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi harum, voluptatum perferendis dicta error blanditiis ipsum in nemo expedita delectus. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae in eius necessitatibus, impedit sapiente cupiditate laudantium perspiciatis neque dolore sequi laborum quo iure facere nobis minima, numquam illo sunt unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, maiores consectetur laboriosam distinctio libero pariatur at quasi aliquam ipsam provident eligendi eos quibusdam animi sapiente iste beatae ducimus cum temporibus unde, nobis totam odio sed ab! Voluptate soluta explicabo harum? Non, rerum nulla repellat hic sapiente culpa modi quo esse!</p>
    </div>
    <img src="https://via.placeholder.com/20" alt="" class="svg-icon">
</div>

Answer 2

这是基于您的代码（其发生的原因）的原因，是因为您告诉p标签使用相同的grid-area，这会导致两个段落使用完全相同的空格，重叠彼此;通过简单地创建一个将使用该区域的容器来解决此问题，该容器中的项目将正常运行。

对我来说，这似乎有点奇怪的CSS Grid用例。检查代码段，让我知道它是否适合您：）

.wrapper{
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "avatar name   icon" "avatar date   date" "review review review";
  border: red 1px solid;
}

h3 {
  grid-area: name;
  margin: 0;
}

.svg-icon {
  grid-area: icon;
}

.date {
  grid-area: date;
}

.box {
  grid-area: review;
}

<div class="wrapper">
  <img src="https://via.placeholder.com/50" alt="">
  <h3>Gene Kang</h3>
  <span class="date">December 29, 2016</span>
  <div class="box">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi harum, voluptatum perferendis       dicta error blanditiis ipsum in nemo expedita delectus. Lorem, ipsum dolor sit amet consectetur           adipisicing elit. Recusandae in eius necessitatibus, impedit
      sapiente cupiditate laudantium perspiciatis neque dolore sequi laborum quo iure facere nobis minima, numquam illo sunt unde?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, maiores consectetur laboriosam distinctio libero pariatur at quasi aliquam ipsam provident eligendi eos quibusdam animi sapiente iste beatae ducimus cum temporibus unde, nobis totam
      odio sed ab! Voluptate soluta explicabo harum? Non, rerum nulla repellat hic sapiente culpa modi quo esse!</p>
  </div>
  <img src="https://via.placeholder.com/20" alt="" class="svg-icon">
</div>

为什么在使用CSS网格布局时我的段落彼此重叠？

2 个答案: