The issue is with the way your grid is set up.

Basically, right now your grid only has 1 column. That’s basically what this code is saying:

grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));

If you change that to simply grid-template-columns: 2; you’ll see how it is working. The way you have it now is how you would want it to look on mobile.

I’m guessing you are missing the responsive styles as the one you linked also has this

@media screen and (min-width: 382px)
.grid {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

I’m an art student and a beginner in web design,
and I built a portfolio website for myself by following my teacher’s instructions after learning the basics：
https://codepen.io/fiona-wang/pen/poJjYYe

Then I found a cool responsive photo grid that I want to incorporate into my site: https://codepen.io/fiona-wang/pen/rNaOPed

.grid {
  margin: 1rem;
  width: calc(100% - 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  grid-gap: 1rem; grid-auto-rows: 250px; grid-auto-flow: row dense;
  opacity: 0;
  animation: load-in 2000ms ease-out forwards;
  @media screen and (min-width: 382px) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  &.loading {
    animation-play-state: paused!important;
  }

I tried to insert this as a child div element in my portfolio section, but its CSS styles (grid, hover animation, font) is not working at all. It seems to be overwritten by how I styled the parent div elements (3 different full screen pages), so my images in this grid are stretched to have a 100% width instead of being in a grid. Hover animation is not working at all and I have no idea why.

I tried to put its CSS styles at the bottom of my CSS files to give them priority and have been researching ways to solve similar problems, but to no avail. I would really appreciate feedback on how to pinpoint where the problem is, or maybe keywords about what kind of things I should learn more about before attempting to do things like this.