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

Question

我是一名艺术学生，也是网页设计的初学者， 在学习基础知识后，我按照老师的指示为自己建立了一个作品集网站： https://codepen.io/fiona-wang/pen/poJjYYe

然后我找到了一个很酷的响应式照片网格，我想将其合并到我的网站中：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;
}

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

我试图将其CSS样式放在CSS文件的底部以赋予它们优先级，并一直在研究解决类似问题的方法，但无济于事。我非常感谢有关如何查明问题所在的反馈，或者可能是关于在尝试做这样的事情之前我应该更多地了解什么样的事情的关键字。

Answer 1

问题在于网格的设置方式。

基本上，现在您的网格只有 1 列。这基本上就是这段代码所说的：

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

如果您将其更改为简单的grid-template-columns: 2;您将看到它是如何工作的。您现在拥有它的方式就是您希望它在移动设备上的外观。

我猜你错过了响应式样式，因为你链接的样式也有这个

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