Html 为什么我的网格没有'；在Chrome中不起作用，但在Firefox开发者版中起作用吗？

我有一个项目，我正在工作，我使用CSS网格样式它，因为我想。问题是它有时在Chrome中工作，有时不工作

查看屏幕截图，下面是代码：-

屏幕截图具有相同的缩放级别、相同的像素比率和相同的像素大小！ 这是谷歌Chrome中的导航，由网格系统制作

这是用网格系统制作的Firefox开发者版中的导航

这是我的密码

HTML

H

CSS

用于网格

.l-grid {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  grid-auto-rows: 7rem;
  gap: 0.3rem;
  grid-template-areas: "navigation";
}

CSS

用于导航

.l-navigation {
  grid-area: navigation;
  background-color: $color-navigation-bar;
  border-bottom: 1px solid $color-navigation-border;
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 2rem;
}

你能告诉我这里怎么了吗？如果可能的话，你能告诉我如何使网格系统适合移动优先设计吗

---

谢谢你回答我的问题

嗯，问题不在于代码，而在于谷歌浏览器，所以我把它放在这里，让其他人看到并找到答案

如果重新启动计算机或删除缓存，效果会很好，与代码本身无关

实际上，如果你只是调整窗口的大小，而不去Chrome中inspect element工具中的响应面板，它就可以工作了

---

在这里和那里浪费了两个小时之后，我找到了这个愚蠢的问题的答案。所以，来回答我的问题

嗯，问题不在于代码，而在于谷歌浏览器，所以我把它放在这里，让其他人看到并找到答案

如果重新启动计算机或删除缓存，效果会很好，与代码本身无关

实际上，如果你只是调整窗口的大小，而不去Chrome中inspect element工具中的响应面板，它就可以工作了

---

在这里和那里浪费了两个小时的时间后，我找到了这个愚蠢的问题的答案。

Lol，我忘了删除一条评论，但我现在不会，因为它很有趣。评论（记得删除这个元素…等等）是我的东西，不是我的帖子对不起！你可以忽略我。你想解决的问题是什么？@Dejan.S为什么在Chrome中使用网格系统时，我的导航中会出现这种奇怪的空间，而在Firefox中却没有？你知道为什么吗？或者如何摆脱它？哈哈，我忘了删除评论，但我现在不会，因为这很有趣。评论（记得删除这个元素…等等）是我的东西，不是我的帖子对不起！你可以忽略我。你想解决的问题是什么？@Dejan.S为什么在Chrome中使用网格系统时，我的导航中会出现这种奇怪的空间，而在Firefox中却没有？你知道为什么吗？或者如何摆脱它？