为何媒体查询设置的Grid布局无法生效？求排查方案

安全阿岳

2026-7-1

解决方案：修复Grid布局无法并排的问题

核心问题是默认样式中的固定width设置干扰了Grid布局逻辑：当触发媒体查询时，.container已经启用Grid布局，但.man的width:100%和.aboutme的width:80%会强制元素维持自身宽度，无法自动填充Grid列的空间，导致无法并排显示。

修改后的媒体查询CSS代码

@media screen and (min-width: 772px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
  }
  .man {
    grid-column: 1;
    grid-row: 1;
    width: 100%; /* 让图片占满Grid单元格宽度 */
    margin: 0; /* 移除默认margin，避免与grid-gap冲突 */
    padding-top: 25px; /* 保留你需要的顶部内边距 */
  }
  .aboutme {
    grid-column: 2;
    grid-row: 1;
    width: 100%; /* 让文本容器占满Grid单元格宽度 */
    margin: 0; /* 移除默认margin */
    padding: 10px; /* 保留内边距 */
  }
}

额外优化提示

其实grid-column和grid-row的设置可以省略——Grid会自动按子元素的顺序，将它们依次放入定义好的列中，代码可以更简洁：

@media screen and (min-width: 772px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
  }
  .man, .aboutme {
    width: 100%;
    margin: 0;
  }
  .aboutme {
    padding: 10px;
  }
  .man {
    padding-top: 25px;
  }
}