CSS Grid无法自适应缩放求助：响应式网格不随屏幕缩小调整

你的代码存在几个关键问题导致网格容器无法自适应缩小，以下是修正方案：

核心问题分析 #

1. grid-template-rows 误用 auto-fit：auto-fit/auto-fill 是专门用于动态调整列数的属性，行不需要这个逻辑，你需要固定2行，直接指定行数即可。
2. inline-grid 限制宽度响应：inline-grid 让容器表现为行内元素，无法充分利用父容器的可用宽度，换成块级的 grid 更合适。
3. 无效类名：HTML中 <div class="6">6</div> 的类名以数字开头，不符合语法规范，会导致样式无法正常绑定。
4. 缺少横向内边距：小屏幕下容器子元素的 padding 直接撑满视口，导致视觉上的截断。

修正后的完整代码 #

HTML（修正类名） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS（调整网格属性） #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 1rem; /* 避免容器贴边 */
}

.container {
    display: grid; /* 替换inline-grid */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    grid-template-rows: repeat(2, minmax(100px, 1fr)); /* 固定2行 */
    max-width: 600px;
    width: 100%; /* 小屏幕占满可用宽度 */
    text-align: center;
    gap: 1rem;
}

.container div {
    padding: 5em;
    background-color: red;
}

关键修改说明 #

• 替换 inline-grid 为 grid：让容器以块级元素形式存在，自动适配父容器宽度。
• 移除行的 auto-fit：明确指定2行，符合你3列2行的布局需求。
• 添加 width: 100%：确保屏幕宽度小于600px时，容器能充分利用可用空间。
• body添加横向padding：防止小屏幕下子元素的padding超出视口，避免截断。
• 修正类名：遵循HTML语法规范，保证样式正常生效。

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