CSS3 Grid布局移动端适配求助：实现3x1网格堆叠显示

嘿，我懂你现在的困扰——刚上手Grid布局，明明想让3列的网格在移动端自动垂直堆叠，结果方块却一个劲缩小直到没法看，对吧？其实这个问题很好解决，毕竟你有移动端开发经验，只是还没摸透Grid响应式的核心逻辑而已～

问题根源 #

你之前的代码应该是固定设置了3列（比如grid-template-columns: repeat(3, 1fr)），但Grid默认不会自动根据屏幕尺寸调整列数，只会压缩每列的宽度，所以小屏幕下就会出现挤成一团的情况。

解决方案：媒体查询+调整列数 #

最直观的方法就是用媒体查询，在移动端断点处把Grid的列数改成1列，这样单元格就会自动垂直堆叠。下面是修改后的完整代码：

HTML代码

<div class="container">
  <div class="grid">
    <div class="cell">
      <img src="https://www.easycalculation.com/area/images/big-square.png" alt="Square">
    </div>
    <div class="cell">
      <img src="https://www.easycalculation.com/area/images/big-square.png" alt="Square">
    </div>
    <div class="cell">
      <img src="https://www.easycalculation.com/area/images/big-square.png" alt="Square">
    </div>
  </div>
</div>

CSS代码

/* 桌面端基础布局：3列等宽 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 单元格之间的间距，比margin更省心 */
  gap: 1rem;
  padding: 1rem;
}

.cell {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden; /* 防止图片超出圆角 */
}

.cell img {
  width: 100%;
  height: auto;
  display: block; /* 去掉图片默认的底部间隙 */
}

/* 移动端断点：屏幕宽度≤768px时改为1列 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

进阶技巧：无需媒体查询的自适应堆叠 #

如果你想更灵活，不用手动设置断点，可以用auto-fit结合minmax，让Grid自动根据屏幕宽度调整列数，当空间不足以放下3列时，自动减少列数直到变成1列：

.grid {
  display: grid;
  /* 每列最小宽度250px，剩余空间自动均分，自动适配列数 */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

这个方法更智能，不用操心断点设置，适合需要适配多种屏幕尺寸的场景。

其实Grid的响应式核心就是调整grid-template-columns的值，结合你已有的移动端开发经验，很快就能熟练掌握啦～

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