Chrome与Safari中Grid布局不响应，窗口宽度卡在980px求助

核心修复步骤 #

在HTML的<head>区域添加viewport元标签，这是解决问题的关键：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

问题原因解析 #

本地HTML文件缺少viewport元标签时，Chrome和Safari会默认采用模拟桌面宽度（约980px）渲染页面。当你缩小窗口，浏览器会对整个页面进行缩放，而非让布局真正响应窗口宽度变化，导致Grid无法继续新增行。而Firefox对无viewport页面的渲染逻辑不同，CodePen则会自动为嵌入页面添加viewport标签，因此这两个场景下布局表现正常。

修复后的完整代码 #

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
          display: flex;
          flex-direction: column;
          align-items: center;
          background-color: plum;
      }

      main {
          width: 100%;
          max-width: 1920px;
          display: flex;
          flex-direction: column;
          justify-content: center;
      }

      section {
          width: 100%;
          display: flex;
          justify-content: center;
          background-color: white;
      }

      ul {
          width: 100%;
          margin: 30px;
          gap: 20px;
          padding: 0;
          list-style: none;
          display: grid;
          grid-template-columns: repeat(auto-fit, 250px);
          grid-auto-rows: 350px;
          justify-content: space-evenly;
      }

      li {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          border: 3px solid steelblue;
          padding: 10px;
      }
    </style>
  </head>
  <body>
    <main>
      <section>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </section>
    </main>
  </body>
</html>

额外优化建议 #

当前ul设置了width:100%和margin:30px，会导致元素实际占用宽度超出父容器，可改为width: calc(100% - 60px)抵消左右margin的影响，让布局计算更精准：

ul {
    width: calc(100% - 60px); /* 替换原width:100% */
    margin: 30px;
    /* 其余样式保持不变 */
}

内容的提问来源于stack exchange，提问作者Vitaly Kharlakov