CODEWITHSUNDEEP
htmlcsscss-grid
Ricardo Zea
Ricardo Zea

Reputation: 10282

Why do my paragraphs overlap each other when using CSS Grid layout?

I'm new to CSS Grid.

My problem is that when I set display: grid; on the parent element that contains two mere paragraphs <p>, the paragraphs overlap one over the other rather than stacking normally one on top of each other, hence, making the container expand its height.

Two questions:

  1. Why is this happening?
  2. How can I fix this to make the paragraphs behave normally (stacking)?

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>

Here's a CodePen demo: https://codepen.io/ricardozea/pen/7869598aa71d7345550f351b00080fac?editors=1100

Upvotes: 1

Views: 547

Answers (2)

IvanS95
IvanS95

Reputation: 5742

This is based on your code, the reason why its happening, is because you are telling the p tags to use the same grid-area, which causes both paragraphs to use the exact same space, overlapping each other; this is fixed by simply creating a container which will use the area instead, and the items inside of it will behave normally.

This seems a little weird use case for CSS Grid to me though. Check the snippet and let me know if it works for you :)

.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>

Upvotes: 2

Francisco Arleo
Francisco Arleo

Reputation: 221

I think that you just forgot to get your paragraphs into a single div and give that div the review grid area so the two paragraphs are treated as a single element and they do not overlap each other. Here is a Fiddle.

//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>

Upvotes: 2

Related Questions