响应式Grid布局：如何随网格尺寸缩放间距？

问题核心是你当前的Grid间距为固定rem值，当模块宽度缩小后，间距的相对占比会被放大，从而显得过于宽松。只需在媒体查询中重新调整Grid的间距参数即可解决。

具体修改方案 #

在你的@media(max-width:1200px)媒体查询块中，为.console-display添加间距调整规则：

@media(max-width:1200px) {
  .console-display {
    /* 根据需求缩小行/列间距，示例数值可自行调整 */
    grid-row-gap: 3rem;
    grid-column-gap: 1rem;
    /* 也可以用简写属性`gap`更简洁：gap: 3rem 1rem; */
  }
  .image-container {
    width: 480px;
  }
  .image-container:last-child {
    /* 建议替换固定宽度为100%，它本身已占满两列，Grid会自动适配容器宽度 */
    width: 100%;
  }
}

额外优化建议 #

1. 避免给Grid模板设置固定px尺寸，改用minmax让布局更灵活：

.console-display {
  /* 替换原固定尺寸，自适应列宽范围 */
  grid-template-columns: repeat(2, minmax(300px, 562px));
  grid-template-rows: repeat(3, auto);
}

2. 移除.image-container的固定宽度，让它继承Grid单元格宽度，减少冗余设置：

.image-container {
  position: relative;
  /* 删除固定width: 562px; */
  width: 100%;
  color: #1a2456;
  margin-bottom: 2rem;
}

调整后，小屏幕下的间距会与模块尺寸匹配，整体布局比例更协调。

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