Why do CSS grid items randomly start stacking on top of each other?

user_14615557 0
Viewed 62

As you can see in this fiddle https://jsfiddle.net/97yo2hc3/2/, we have a grid for demonstration with some placeholder items. With a smaller number (<150ish) of items, this works fine. However, with a large number of these items, if you scroll to the end of the grid, you can see how it stops expanding and just starts stacking the divs on top of each other. Why might this be? Is this a misapplication of grid-row-end (I am using it as part of this design https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb)? Thanks for any insight!

/* Grid css */
.a {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.b {
  grid-row-end: span 20;
}

OVERLAPPING

css-grid css html
1 Answers

Grid-row-end is not necessary in this case (unless you are being asked to use it?).

As you can see here you can manipulate the grid-row-end span to 20 and you'll see that it will carry out all the way to the bottom of page. Instead of this you can just adjust the height of the b div (seen below) and it will produce the same overall effect without the overlapping.

   .b {
  height: 350px;
}
user_142958960
Related