使用CSS Grid与Flexbox时如何对齐元素？计算器按钮错位问题求解

核心问题原因 #

你当前用Grid做中间区域、Flex做底部区域，两者的宽度分配逻辑不同：Flex的flex比例计算会扣除子元素的margin值后再按比例分配宽度，而Grid的列宽是基于总容器宽度统一计算的，两边的单位列宽度不一致导致错位。

最优修改方案 #

直接把所有按钮行统一用4列Grid布局，完全规避布局逻辑差异带来的对齐问题，修改后的CSS如下：

body {
    background-color: black;
}

button {
    color: black;
    width: 100%;
    height: 100%;
}

#main {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 760px;
    height: 470px;
}

/* 统一所有按钮行的Grid布局、间距 */
#topdiv, #middlediv, #bottomdiv {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 5px;
}

#topdiv>div, #middlediv>div, #bottomdiv>div {
    height: 50px;
}

#middlediv{
    border: solid 1px red;
}

#bottomdiv{
    border: solid 1px green;
}

/* 顶部两个按钮各占2列 */
#topdiv > div {
    grid-column: span 2;
}

/* 底部0按钮占3列 */
#x0 {
    grid-column: span 3;
}

把原来CSS里的#topdiv的flex配置、#bottomdiv的flex配置、#x0和#x的flex属性都删掉，替换成上述代码即可，所有按钮列会自动完全对齐。

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