如何在小屏幕上垂直布局CSS Grid网格列？

完全可以用CSS Grid实现你要的效果，核心是通过媒体查询修改每组的Grid行列模板，利用Grid的跨行列特性让按钮垂直对齐。下面是具体实现方案：

HTML结构 #

给每组表单元素套一个容器，方便单独控制布局：

<form class="form-grid">
  <div class="form-group">
    <input type="text" placeholder="输入项1">
    <input type="text" placeholder="输入项2">
    <input type="text" placeholder="输入项3">
    <button type="button">⊖</button>
  </div>
  <div class="form-group">
    <input type="text" placeholder="输入项1">
    <input type="text" placeholder="输入项2">
    <input type="text" placeholder="输入项3">
    <button type="button">⊖</button>
  </div>
  <div class="form-group">
    <input type="text" placeholder="输入项1">
    <input type="text" placeholder="输入项2">
    <input type="text" placeholder="输入项3">
    <button type="button">⊖</button>
  </div>
</form>

CSS样式 #

大屏幕（四列布局） #

保持你当前的四列结构，用两层Grid控制整体和每组的排列：

.form-grid {
  display: grid;
  gap: 1.5rem; /* 组与组之间的间距 */
  grid-template-columns: repeat(4, 1fr);
}

.form-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem; /* 输入框与按钮之间的间距 */
  grid-column: 1 / -1; /* 让每组占满整行四列 */
}

小屏幕（垂直输入+右侧按钮） #

通过媒体查询修改每组的Grid模板，利用grid-row让按钮跨三行，实现垂直对齐：

@media (max-width: 768px) {
  .form-group {
    grid-template-columns: 1fr auto; /* 左侧输入区占满宽度，按钮自适应 */
    grid-template-rows: repeat(3, auto); /* 三行对应三个输入框 */
    align-items: center; /* 按钮与输入框垂直居中对齐 */
  }

  .form-group input {
    grid-column: 1; /* 所有输入框归到第一列 */
  }

  .form-group button {
    grid-column: 2; /* 按钮放在第二列 */
    grid-row: 1 / 4; /* 按钮跨三行，占据整个组的垂直高度 */
    height: 100%; /* 让按钮高度铺满，强化垂直对齐效果 */
    padding: 0 1rem; /* 调整按钮内边距优化视觉 */
  }
}

关键逻辑说明 #

• 外层form-grid控制整体布局，大屏幕下保持四列框架；
• 内层form-group是核心，小屏幕下通过修改行列模板，把输入框集中到左侧列，按钮跨三行占据右侧列，既实现输入框垂直排列，又让按钮和整个输入组垂直对齐；
• 用gap属性统一控制间距，避免额外的margin设置。

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