如何在display: grid布局中将元素从一个网格区域移至另一区域

要实现这个需求，只需要给外层的form设置Grid布局，再通过CSS控制按钮所在的网格位置即可，下面提供两种实用方案：

方案1：用网格区域命名（直观好维护） #

先给网格的各个区域命名，再把元素绑定到对应区域，想调整位置直接改命名布局就行：

form {
  display: grid;
  /* 这里示例是2列3行的布局，你可以根据需求改列数、行数 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  /* 定义网格区域，.代表空区域 */
  grid-template-areas:
    "phone name"
    "class ."
    ". button";
  gap: 16px; /* 可选：设置元素间的间距 */
}

.item-1 {
  grid-area: phone; /* 绑定到phone区域 */
}

.item-2 {
  grid-area: name; /* 绑定到name区域 */
}

.item-3 {
  grid-area: class; /* 绑定到class区域 */
}

.application-button {
  grid-area: button; /* 绑定到button区域，就是你想要的目标位置 */
  width: 100%; /* 可选：让按钮占满所在网格的宽度 */
}

方案2：直接指定行列位置（灵活快捷） #

如果不需要命名区域，直接给按钮指定它要占的网格行和列：

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
}

/* 把按钮放到第3行第2列（网格的行列从1开始计数） */
.application-button {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  width: 100%;
}

/* 可选：给其他元素也指定位置，比如把item-3放到第2行第1列 */
.item-3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

你可以根据实际需要调整grid-template-columns（列数）、grid-template-rows（行数）的参数，以及按钮的行列值，就能把按钮放到任何你想要的网格区域里。

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