如何使Grid布局中的两列实现响应式？移动端上下排列方法

嘿，这个需求其实很好实现，核心就是用**CSS媒体查询（Media Queries）**针对小屏幕设备调整Grid的列配置就行。先看你的现有代码，桌面端的两列居中已经搞定了，只需要加一段响应式代码就能适配移动端。

具体修改方案 #

1. 保留你原有的.two-pics基础样式，确保桌面端正常显示。
2. 添加媒体查询，当屏幕宽度小于某个断点（比如768px，这个数值你可以根据自己的设计需求调整）时，把grid-template-columns改成单列布局，同时可以优化一些移动端的间距细节。

修改后的完整代码 #

.two-pics {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: 400px 400px;
  object-fit: cover;
  color: #444;
  margin-top: 100px;
  justify-content: center;
}

.box {
  background-color: white;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
}

.a {
  grid-column: 1;
  grid-row: 1 / 12;
}

.b {
  grid-column: 2;
  grid-row: 1 / 12;
}

/* 移动端适配：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  .two-pics {
    /* 切换成单列布局，用fr弹性单位适配不同屏幕 */
    grid-template-columns: 1fr;
    /* 移动端缩小上边距，避免内容太靠上 */
    margin-top: 50px;
    /* 让内容占满屏幕宽度，替代原来的居中 */
    justify-content: stretch;
    /* 缩小间距更适合移动端 */
    grid-gap: 30px;
    /* 左右加内边距，防止内容贴屏幕边缘 */
    padding: 0 20px;
  }

  /* 单列下不需要指定列位置，自动上下排列，这里可以重置一下 */
  .a, .b {
    grid-column: 1;
  }
}

几个关键点说明 #

• 断点选择：768px是常用的移动端断点，如果你需要适配更小的手机（比如iPhone SE），可以改成600px或者其他数值。
• 1fr单位：用弹性单位替代固定的400px，能让列自动适配不同宽度的移动端屏幕，比固定宽度更灵活。
• 细节优化：移动端的上边距、间距、内边距都是为了提升视觉体验，你可以根据自己的设计风格调整这些数值。

这样改完之后，桌面端还是保持你原来的两列居中布局，当屏幕宽度降到768px以下时，两列就会自动变成上下排列，完美适配移动端啦~

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