CSS Grid实现表单末行两按钮右对齐问题排查

我想用CSS Grid实现一个表单，需要让末行的两个按钮靠右对齐，但目前布局不符合预期，请问以下代码和截图中存在哪些错误？

CSS代码

.wrapper {
    width:75%;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    margin: 0;
    background: white;
    display: grid;
    grid-template-columns: 35% 65%;

    .grid-item {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        background: #FFFFFF;
        border: 1px solid #828995;
        height: 20px;
    }
    label {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        padding: 14px 0 0 0;
        display: inline-block;
        font-family: "Corpid";
    } 

}

HTML代码

<form>
        <div className="wrapper">
          <label htmlFor="email">Email*</label>
          <input id="email" type="text" className="grid-item"/>
          <label htmlFor="name">Name*</label>
          <input id="name" type="text" className="grid-item"/>
          <BaseButton >{"Back"}</BaseButton>
          <BaseButton>{"Send"}</BaseButton>
        </div>
      </form>

核心错误点 #

1. 网格列分配逻辑错误：Grid容器设置了grid-template-columns: 35% 65%，两个按钮会被自动分配到第一列和第二列，导致它们分别占据左右两个区域，无法实现靠右并排的效果。
2. 缺少按钮区域的布局控制：没有为末行按钮设置跨列或对齐规则，按钮默认遵循网格列的分配逻辑，自然无法聚合到右侧。

修正方案（推荐） #

通过给按钮添加容器并设置网格跨列+文本对齐，实现按钮靠右排列：

步骤1：调整HTML结构，将按钮放入统一容器

<form>
  <div className="wrapper">
    <label htmlFor="email">Email*</label>
    <input id="email" type="text" className="grid-item"/>
    <label htmlFor="name">Name*</label>
    <input id="name" type="text" className="grid-item"/>
    <!-- 新增按钮容器 -->
    <div class="button-group">
      <BaseButton>{"Back"}</BaseButton>
      <BaseButton>{"Send"}</BaseButton>
    </div>
  </div>
</form>

步骤2：修改CSS，添加容器的网格布局规则

.wrapper {
    width:75%;
    padding: 15px 20px; /* 简化内边距写法 */
    margin: 0;
    background: white;
    display: grid;
    grid-template-columns: 35% 65%;
    gap: 12px; /* 增加网格间距，优化布局美观度 */

    .grid-item {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        background: #FFFFFF;
        border: 1px solid #828995;
        padding: 8px; /* 增加内边距，避免输入内容贴边 */
        height: auto; /* 取消固定高度，适配内边距 */
    }
    label {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        padding: 14px 0 0 0;
        display: inline-block;
        font-family: "Corpid";
    } 

    /* 按钮容器的布局规则 */
    .button-group {
        grid-column: 1 / -1; /* 让容器跨占所有列（这里是2列） */
        text-align: right; /* 内部按钮靠右对齐 */
        padding-top: 8px;
    }
}

替代方案（无需新增容器） #

如果不想添加额外容器，可直接给按钮设置网格位置：

.wrapper {
    /* 保留原有样式，新增以下规则 */
    gap: 12px;

    BaseButton {
        grid-column: 2; /* 让所有按钮都放入第二列 */
        justify-self: end; /* 按钮自身靠右对齐 */
        margin-left: 8px; /* 按钮之间增加间距 */
    }
}

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