如何通过Media Queries禁用网格并适配小屏设备？

你的问题核心是：在600px以下的小屏设备中，虽然隐藏了图片，但原来设置的grid-column/grid-row属性依然生效，加上固定的grid-template-rows限制，导致网格布局无法正常转为单列。以下是修改后的可行方案：

修改后的CSS代码 #

.section-am {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr 1fr 7%;
  gap: 15px;
  max-width: 80%;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.about-me1 {
  grid-column: 2 / -1;
  grid-row: 1 / 2;
  margin: 50px;
}

.about-me2 {
  grid-column: 1 / 2;
  grid-row: 2 / -1;
  margin: 50px;
}

.about-me-img1,
.about-me-img2 {
  width: 100%;
  height: auto;
  max-width: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto;
}

.about-me3 {
  grid-column: 1/-1;
  grid-row-start: 3;
  margin: 50px;
  text-align: center;
}

.about-me4 {
  grid-column: 1/-1;
  grid-row-start: 4;
  margin: 50px;
  text-align: center;
}

.section-am a {
  color: #2d545e;
  text-decoration: none;
}

.section-am a:hover {
  text-decoration: underline;
  color: #12343b;
}

@media (max-width: 600px) {
  h1 {
    padding-top: 100px;
  }
  .section-am {
    grid-template-columns: 1fr; /* 转为单列 */
    grid-template-rows: auto; /* 取消固定行高，自适应内容 */
    max-width: 95%; /* 小屏放宽宽度限制 */
    padding: 10px;
  }
  /* 重置所有网格项的位置属性，让它们按单列顺序排列 */
  .about-me1,
  .about-me2,
  .about-me3,
  .about-me4 {
    grid-column: initial;
    grid-row: initial;
    margin: 15px; /* 小屏减小margin，提升可读性 */
    text-align: left; /* 小屏左对齐更舒适，按需调整 */
  }
  .about-me3, .about-me4 {
    text-align: center; /* 保留这两个的居中 */
  }
  .about-me-img1,
  .about-me-img2 {
    display: none; /* 隐藏图片 */
  }
}

关键修改说明 #

• 重置grid-template-rows: auto：取消原有的固定行高设置，避免内容被压缩或出现空白区域
• 重置所有网格项的grid-column和grid-row为initial：清除大屏时的自定义网格定位，让元素按单列顺序依次排列
• 调整小屏的max-width、padding和margin：优化移动端的视觉空间，提升用户体验
• 按需调整文本对齐方式：小屏左对齐大部分文本，保留about-me3和about-me4的居中，匹配预期效果

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