咨询：调整template-form__list-item的CSS网格布局能否实现目标表单样式

现有代码 #

HTML代码 #

<div class="template-form__list-wrapper--row">
    <%-- company information --%>
    <div class="template-form__list-item">
        <div class="template-form__item-label template-form__item-label">Company</div>
       
    </div>
    <%-- person in charge --%>
    <div class="template-form__list-item">
        <div class="template-form__item-label template-form__item-label">PersonInCharge</div>
        <input form="formCasePost" name="CasePostFormBean.contractorPersonnelName">
    </div>
    <%-- department --%>
    <div class="template-form__list-item">
        <div class="template-form__item-label">Department</div>
        <input form="formCasePost" name="CasePostFormBean.contractorDepartmentName">
    </div>
    <div class = "case-post__list-company">default</div>
    <div class = "case-post__list-company">Add new comapny</div>
</div>

CSS代码 #

.template-form__list-wrapper--row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.template-form__list-item {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.75rem;
    align-items: center;
    height: 100%;
}

.template-form__item-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    height: 100%;
    width: 10rem;
    padding: 0.25rem 0;
    background-color: var(--main-color--2);
    border: 1px solid var(--border-color--1);
}
.case-post__list-company {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0.5rem;
    width: 5rem;
    color: var(--main-color--1);
    background-color: var(--button-color--1);
    border: 1px solid var(--main-color--1);
    border-radius: 0.25rem;
    box-shadow: 0 3px 3px var(--border-color--3);
    cursor: pointer;
}

当前布局效果 #

目标布局效果 #

问题 #

请问通过修改template-form__list-item的网格布局来达成目标样式是否正确？恳请提供技术建议。

技术建议 #

修改template-form__list-item的网格布局是可行方向，但结合目标布局来看，需要配合结构调整才能完美实现，具体方案如下：

1. 调整结构，将按钮归入对应容器
   目标布局中Company标签与两个按钮是横向关联的，当前HTML里按钮独立于Company的template-form__list-item外，所以首先要把两个.case-post__list-company按钮移到Company对应的网格容器内部，让标签和按钮属于同一布局单元。

2. 针对Company项单独设置网格规则
   给Company的template-form__list-item添加专属类（比如template-form__list-item--company），修改它的网格列配置，适配标签+两个按钮的结构：

.template-form__list-item--company {
    grid-template-columns: 10rem auto auto;
    gap: 0.5rem;
}

其余两个template-form__list-item（负责人、部门）保持原有grid-template-columns: 10rem 1fr规则即可，确保输入框占满剩余宽度。

3. 调整后的完整HTML示例

<div class="template-form__list-wrapper--row">
    <%-- company information --%>
    <div class="template-form__list-item template-form__list-item--company">
        <div class="template-form__item-label">Company</div>
        <div class="case-post__list-company">default</div>
        <div class="case-post__list-company">Add new comapny</div>
    </div>
    <%-- person in charge --%>
    <div class="template-form__list-item">
        <div class="template-form__item-label">PersonInCharge</div>
        <input form="formCasePost" name="CasePostFormBean.contractorPersonnelName">
    </div>
    <%-- department --%>
    <div class="template-form__list-item">
        <div class="template-form__item-label">Department</div>
        <input form="formCasePost" name="CasePostFormBean.contractorDepartmentName">
    </div>
</div>

通过上述调整，既能利用网格布局的对齐特性，又能让整体结构匹配目标效果，三个表单单元横向排列，每个单元内部的元素也能正确对齐。

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