javascript - ''Jumpy content'' when scrolling down

Question

In the card that has a class .span-2 I encounter a bug where if I scroll the content is at first on the top of the card, then in the middle.

I set the card as flex and justify-content: center which should work as expected but this is giving me some weird behaviour. For the small cards, it works ok. Maybe it has to do with the wrong set of the grid?

Codepen

SCSS:

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 10px;
  grid-auto-rows: minmax(300px, auto);
  grid-auto-flow: dense;
  padding: 10px;
  background-color: $background-color;
}

.grid-item {
  display:flex;
  justify-content: center;
  flex-direction:column;
  padding: 1rem;
  font-size: 40px;
 
  background-color: $secondbg-color;
  height: 100%;
 
  color: #929796;
  border-radius: 5px;
  
  h2{
    color:$primary-color;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: -12px;
    font-size: 4.2rem;
    
  }

  h3{
    color: $descp-color;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 2.5rem;
    font-weight: bold;
  }

  p{
    text-transform: uppercase;
    letter-spacing:1px;
    color: $album-color;
  }
 
}

.span-2 {
  grid-column-end: span 2;
  grid-row-end: span 2;
}

Answer 1

等待大神答复