Почему мои абзацы перекрывают друг друга при использовании CSS Grid layout?

Question

Я новичок в CSS Grid.

Моя проблема в том, что, когда я устанавливаю display: grid; в родительском элементе, который содержит два простых абзаца <p>, абзацы накладываются друг на друга, а не накладываются друг на друга, как следствие,контейнер увеличивает свою высоту.

Два вопроса:

1. Почему это происходит?
2. Как я могу исправить это, чтобы параграфы работали нормально (стекирование)?

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

Это основано на вашем коде, причина, по которой это происходит, заключается в том, что вы указываете тегам 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>

Answer 2

Я думаю, что вы просто забыли собрать свои абзацы в один элемент 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>