CSS 媒体查询已损坏

Question

这是实时代码http://kijpi.ddns.net/fementor3/

这是我在已损坏的 CSS 文件末尾的媒体查询

`@media (max-width: 600px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}`

可以在此处查看整个 CSS 文件： http://kijpi.ddns.net/fementor3/style.css

一旦将大小缩小到足够低，在浏览器的检查器中，看起来就像正在读取 grid-template-columns 行，但事实并非如此，因为网格没有改变。有比我更有经验的人可以让我知道他们看到了什么问题吗？

Answer 1

问题是您的网格项仍然放置在特定的行和列中：

.card:nth-of-type(4) {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

因此，即使您的模板没有指定这些额外的行和列，网格也会自动生成它们。

要解决此问题，请将这些值设置回

auto

:

@media (max-width: 600px) {
  .card:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
  }
}