Why is my grid stretching when I overlap elements?

Question

New to CSS Grid, and I'm trying to figure out some layout stuff. I have 4 "news" divs, each with some text. Essentially I want the first div to be a circle, and then the remaining 3 divs positioned behind the first div and stick out on the right side.

In my code below, I've accomplished this, but it stretches out the grid, and ultimately the div's. If you remove the code in .news2-4 that has a comment above it, you'll see that the grid goes back to normal. What is going on here, and why isn't the grid maintaining it's shape when these styles are applied to .news2-4?

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.news {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-auto-rows: 200px;
  display: grid;
}

.news1 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 4;
  background: beige;
  border-radius: 100%;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
}

.news2 {
  grid-column-start: 5;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 3;
  background: purple;
  position: relative;
  z-index: -1;
  /*Would like the div to start and end here*/
  grid-column-start: 3;
  grid-column-end: 8;
}

.news3 {
  grid-column-start: 8;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 2;
  background: aquamarine;
  position: relative;
  z-index: -1;
  /*Would like the div to start and end here*/
  grid-column-start: 3;
  grid-column-end: 9;
}

.news4 {
  grid-column-start: 7;
  grid-column-end: 12;
  grid-row-start: 3;
  grid-row-end: 4;
  background: red;
  position: relative;
  z-index: -1;
  /*Would like the div to start and end here*/
  grid-column-start: 3;
  grid-column-end: 9;
}

<div class="wrapper">
  <section class="news">
    <div class="card news1">
      This is a test
    </div>
    <div class="card news2">
      This is a test
    </div>
    <div class="card news3">
      This is a test
    </div>
    <div class="card news4">
      This is a test
    </div>
  </section>
</div>

Using border-radius for your "circle" won't give you a circle if you're allowing the shape to scale along with the window size. Remove the border-radius rules and replace them with a clip-path, such as `-webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%);` — Kerri, Feb 08 '19 at 14:31

score 0 · Answer 1 · answered Feb 08 '19 at 19:04

It appears that you're overlooking a fundamental rule in CSS Grid: Grid properties work only between parent and child elements. Descendants of a grid container, beyond the children, are out of scope and will ignore grid commands.

You've created a 12-column grid container with .wrapper. You appear to be setting the grid lines on the .card items to this container. Except the card items are grandchildren of .wrapper. They will look to .news as their grid container.

More details:

Why is my grid stretching when I overlap elements?

1 Answers1