如何实现两个相邻按钮始终同尺寸，适配移动端与桌面端布局

预期效果 #

移动端

移动端布局注意事项：两个按钮高度一致，高度由名称较长的按钮决定，第一个按钮的文本需水平垂直居中。

桌面端

桌面端布局注意事项：两个按钮宽度一致，宽度由名称较长的按钮决定，无需各自占屏幕50%宽度；第一个按钮文本居中，两个按钮整体居中排布且中间保留一定间距。

实现方案 #

无需修改现有HTML结构，仅调整CSS样式即可，核心采用CSS Grid布局实现自动适配规则：

.my-buttons {
    display: grid;
    justify-content: center;
    /* 按钮间距可根据需求调整 */
    gap: 12px;
    button {
        cursor: pointer;
        /* 按钮文本水平垂直居中 */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 若允许按钮文本换行可删除下一行 */
        white-space: nowrap;
    }
}

/* 桌面端断点，可根据实际业务调整阈值 */
@media (min-width: 768px) {
    .my-buttons {
        /* 两列等宽，宽度由内容最长的按钮决定 */
        grid-template-columns: repeat(2, 1fr);
        /* 容器宽度适配内容，不占满全屏 */
        width: fit-content;
        /* 容器整体水平居中 */
        margin: 0 auto;
    }
}

/* 移动端断点 */
@media (max-width: 767px) {
    .my-buttons {
        grid-auto-flow: column;
        /* 所有按钮高度统一对齐最高的按钮 */
        grid-auto-rows: 1fr;
    }
}

实现逻辑说明 #

1. Grid布局默认会让同一行内的所有元素高度保持一致，天然满足全场景下两个按钮等高的要求，无需额外适配
2. 桌面端通过grid-template-columns: repeat(2, 1fr) + width: fit-content实现两列等宽，且总宽度由最长内容的按钮决定，不会占满整行
3. 移动端通过grid-auto-flow: column保持按钮横向排列，grid-auto-rows: 1fr确保所有按钮高度统一对齐高度最高的长文本按钮
4. 按钮内部通过inline-flex实现文本的水平垂直居中，gap属性统一控制按钮间距

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