如何制作响应式Grid？自定义Grid适配全设备问题求助

问题根源 #

• 容器和所有网格项都使用固定像素宽高，完全无法随屏幕尺寸自适应
• 媒体查询仅修改列数，未同步调整网格区域定义（grid-template-areas）和行配置，导致布局错乱
• 尝试使用Bootstrap的col-*类但未引入Bootstrap样式文件，类名无实际作用

修复步骤 #

1. 移除固定尺寸：删除.container的固定width/height，以及所有网格项的width/height，让网格自动填充可用空间
2. 改用相对单位：用fr（分数单位）替代固定像素定义列/行比例，实现自适应分配空间
3. 重构媒体查询：针对不同断点重新定义网格区域、列数和行数，适配小屏布局逻辑
4. 避免布局冲突：若坚持使用Bootstrap，需引入其CSS文件，但建议专注于Grid布局，减少混合布局的复杂度

修改后完整代码 #

CSS 代码 #

.container {  
    display: grid;
    /* 大屏用分数单位维持原始比例 */
    grid-template-columns: 2fr 2fr 2fr 3fr;
    grid-template-rows: 1fr 2fr 1.8fr 2.3fr;
    gap: 5px;
    grid-auto-flow: row;
    grid-template-areas:
      "A B C D"
      "E B C D"
      "F G H D"
      "I I I I";
    /* 限制最大宽度+自适应宽度+居中 */
    max-width: 1440px;
    width: 95%;
    margin: 0 auto;
    min-height: 100vh;
  }
  
  /* 仅保留网格区域定义，移除固定宽高 */
  .A { grid-area: A; }
  .B { grid-area: B; }
  .C { grid-area: C; }
  .D { grid-area: D; }
  .E { grid-area: E; }
  .F { grid-area: F; }
  .G { grid-area: G; }
  .H { grid-area: H; }
  .I { grid-area: I; }
  
  html, body {
    height: 100%;
    margin: 0;
    padding: 10px 0;
    box-sizing: border-box;
  }
  
  .container * {
    border: 1px solid red;
    position: relative;
    /* 强制网格项填满所在网格区域 */
    width: 100%;
    height: 100%;
  }
  
  .container *:after {
    content:attr(class);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
  }

  /* 平板断点：2列布局，重新规划区域 */
  @media (max-width: 991.98px) { 
    .container { 
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(6, auto);
      grid-template-areas:
        "A E"
        "B B"
        "C C"
        "F G"
        "H D"
        "I I";
      gap: 10px;
    }
  }

  /* 手机断点：单列布局 */
  @media (max-width: 575.98px) { 
    .container { 
      grid-template-columns: 1fr;
      grid-template-rows: repeat(9, auto);
      grid-template-areas:
        "A"
        "E"
        "B"
        "C"
        "F"
        "G"
        "H"
        "D"
        "I";
    }
  }

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Layout</title>
    <link rel="stylesheet" type="text/css"="/dashboard.css"> 
    <!-- 若需使用Bootstrap的col类，需引入官方CSS文件，建议避免与Grid布局混用 -->
</head>
<body>
    <section class="content">
        <div class="container">
          <div class="A"></div>
          <div class="B"></div>
          <div class="C"></div>
          <div class="D"></div>
          <div class="E"></div>
          <div class="F"></div>
          <div class="G"></div>
          <div class="H"></div>
          <div class="I"></div>
        </div>
    </section>
</body>
</html>

核心优化说明 #

• fr单位让网格列/行按比例分配可用空间，替代固定像素实现自适应
• 容器设置max-width避免大屏拉伸过宽，width:95%适配小屏边距
• 媒体查询中重新定义grid-template-areas，确保小屏布局逻辑合理
• 所有网格项通过width:100%; height:100%;填满所在网格区域，无需固定尺寸

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