Grid行方向尺寸异常：如何保持网格项书籍形状并自适应滚动？

核心思路 #

问题出在你试图用网格行的固定尺寸维持书籍宽高比，方向错了。正确做法是给每个网格项直接设置宽高比，让它自动适配列宽，同时通过页面整体的flex布局保证<main>在空状态下填充剩余空间，内容超出时自动滚动。

步骤拆解 #

1. 页面整体布局：把<body>设为flex垂直布局，固定头部和底部高度，让<main>占满剩余视口空间。
2. 网格容器设置：给<main>里的.grid添加min-height: 100%，确保空网格时填满<main>；列用repeat(auto-fill, minmax(200px, 1fr))保证自适应列数。
3. 网格项宽高比：给.grid-item设置aspect-ratio: 2/3，强制宽是高的2/3，不管内容多少都能维持书籍形状。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>书籍网格</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header, footer {
      padding: 1rem;
      background: #f0f0f0;
    }

    main {
      flex: 1;
      padding: 1rem;
      overflow-y: auto; /* 内容超出时垂直滚动 */
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1.5rem;
      min-height: 100%; /* 空网格时填满main */
    }

    .grid-item {
      aspect-ratio: 2/3; /* 核心：宽高比2:3 */
      background: #e0e0e0;
      border-radius: 4px;
      /* 可选：内部内容居中 */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <header>页面头部</header>
  <main>
    <div class="grid">
      <!-- 动态添加的.grid-item -->
      <div class="grid-item">书籍1</div>
      <div class="grid-item">书籍2</div>
      <div class="grid-item">书籍3</div>
      <div class="grid-item">书籍4</div>
      <div class="grid-item">书籍5</div>
      <div class="grid-item">书籍6</div>
      <div class="grid-item">书籍7</div>
      <div class="grid-item">书籍8</div>
    </div>
  </main>
  <footer>页面底部</footer>
</body>
</html>

为什么之前的方法无效？ #

• grid-template-rows: repeat(auto-fill, minmax(300px, 1fr))是错误用法：auto-fill是针对列的逻辑，用来自动生成列数，不能用来处理行。固定行高会导致窗口宽度变化时，列宽改变但行高不变，破坏宽高比。
• 显式指定行数需要JS修改完全没必要——通过给网格项设置aspect-ratio，行高会自动跟随列宽调整，完美适配窗口尺寸变化。

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