CSS Grid实现两栏布局无响应性，如何让图片栏移到第一栏下方

你可以通过CSS媒体查询修改小屏设备下的Grid列规则，实现图片栏下移的效果，具体修改如下：

核心修改代码 #

只需要在你的原有CSS基础上新增以下媒体查询规则即可：

/* 原有代码保留 */
.Background {
  display: grid;
  grid-template-columns: 40% 60%;
}

/* 新增移动端适配规则，断点768px可根据你的业务需求调整 */
@media (max-width: 768px) {
  .Background {
    /* 改为单列布局，子元素自动上下排列 */
    grid-template-columns: 1fr;
  }
  /* 以下为可选优化，适配小屏的文字和图片显示 */
  .SectionGiveAway__container {
    padding: 1em;
  }
  .SectionGiveAway__container-title {
    font-size: 46px;
    line-height: 54px;
  }
  .SectionGiveAway__container-subtext {
    font-size: 26px;
    line-height: 32px;
  }
  .SectionGiveAway__container-boldtext {
    font-size: 30px;
    line-height: 38px;
  }
  .SectionGiveAway__grill-image {
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }
}

实现原理 #

• 媒体查询@media (max-width: 768px)会在设备屏幕宽度≤768px时触发，覆盖原有Grid的列设置
• grid-template-columns: 1fr设置容器仅占1列，Grid的子元素会按照HTML原有顺序从上到下排列，表单在上、图片在下，符合你的需求
• 可选优化规则是为了避免你原有代码里的超大字号在小屏溢出，同时让图片自适应容器宽度，避免横向滚动

如果你不想使用媒体查询，也可以用Grid内置的响应式函数实现自动断行：

.Background {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

这种写法会在容器宽度不足640px（两列最小宽度之和）时自动切换为单列，缺点是宽屏状态下两栏是等宽的，无法保留你原来的40%:60%的比例，适合对宽度比例要求不高的场景。

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