为什么我的网格在 Chrome 中不起作用，但在 Firefox Developer Edition 中起作用？

Question

I have a project that I'm working on and I use CSS grids to style it as I want. The problem is sometimes it works in Chrome and sometimes it doesn't

Look at screenshot and below it is the code:-

The screenshots are at the same zoom level and the same pixel ratio, and the same pixel size! This is the navigation in Google Chrome made with the grid system

And this is the navigation in Firefox Developer Edition made with the grid system

And here is my code

HTML

<!-- START: GRID CONTAINER -->
    <div class="l-grid">
      <!-- START: RESPONSIVE NAVBAR -->
      <nav class="l-navigation" data-screen="mini">
        <div class="l-navigation__cart js-miniCartTrigger" data-icon="miniCart">
          <a href="#" class="l-navigation--cart--focus"
            ><i class="fas fa-shopping-cart l-navigation__cart--icon"></i
          ></a>
        </div>
        <!-- Make the whole div a hyperlink -->
        <!-- Remember to remove this element when using the mini cart because it's clickable even when its beneath it -->
        <div
          class="l-navigation__logo"
          onclick="location.href='http:/\/localhost:5500/index.html'"
        >
          <i class="fas fa-gem l-navigation__logo--icon"></i>
          <h2 class="l-navigation__logo--title">The H</h2>
        </div>
        <div class="l-navigation__menu" data-menu="miniMenu">
          <a href="#" class="l-navigation--menu--focus"
            ><i class="fas fa-bars l-navigation__menu--icon js-navigationIcon"></i
          ></a>
            <i class="fas fa-times l-navigation__menu--icon u-d-none js-navigationIconCancel"></i
          ></a>
        </div>
        <!-- END: RESPONSIVE NAVBAR -->
      </nav>
       <!-- END: GRID -->
     </div>

CSS for the grid

.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 for the navigation

.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;
}

Can you tell me what is wrong here? And if possible can you tell me how can I make the grid system suitable for mobile-first designing?

Thanks

Answer 1

So, to answer my question

Well, the problem is not something with the code but actually with Google Chrome So I'm keeping it here for others to see and find the answer

If you restart your computer or remove the cache it works great and it doesn't have anything to do with the code itself

Well, actually if you just resize the window without going to the responsive panel in the inspect element tool in Chrome it works

I found the answer for this stupid and silly thing after 2 hours of wasting time here and there