Html 父元素中的CSS样式正在阻止样式在新的子元素中运行

我是一名艺术专业的学生，也是网页设计的初学者， 在学习了基础知识后，我按照老师的指示为自己建立了一个档案袋网站：

然后，我发现了一个很酷的响应式照片网格，我想将其整合到我的网站中：

我试图将其作为子div元素插入我的公文包部分，但它的CSS样式（网格、悬停动画、字体）根本不起作用。它似乎被我如何设置父div元素（3个不同的全屏页面）的样式所覆盖，因此我在这个网格中的图像被拉伸到100%宽度，而不是在网格中。悬停动画根本不起作用，我也不知道为什么

---

我试图把它的CSS样式放在我的CSS文件的底部，以给予它们优先权，并且一直在研究解决类似问题的方法，但没有结果。我非常希望得到关于如何找出问题所在的反馈，或者关于在尝试这样做之前我应该了解更多的哪些方面的反馈。

问题在于网格的设置方式

基本上，现在网格只有一列。这就是这段代码的基本意思：

网格模板列：重复（自动拟合，最小值（100%，1fr））

如果将其更改为简单的
网格模板列：2您将看到它是如何工作的。你现在拥有它的方式就是你希望它在手机上的外观

我猜你错过了响应风格，因为你链接的那一个也有这个

@媒体屏幕和（最小宽度：382px）
.电网{
网格模板列：重复（自动拟合，最小值（350px，1fr））；
}
非常感谢你，莱利！这真的消除了我的困惑！不客气。请别忘了接受我的回答。
.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;
  }