CSS Grid三等分布局如何为每列设置等高右侧分隔边框

你当前实现里边框高度无法统一的核心原因，是给Grid容器.sort-count-filter设置了align-items: center属性：

• CSS Grid布局默认的align-items值为stretch，会让同一行内的所有网格子项自动拉伸，和当前行的最大高度保持一致
• 当你把值改为center后，子项会收缩到和自身内容等高，再垂直居中对齐到网格单元里，此时加在子项上的边框只会跟随子项自身高度渲染，自然会出现长短不齐的问题

不需要额外加伪元素、也不需要写死高度，只要调整布局逻辑，既能保留内容垂直居中的效果，又能实现等高列分隔边框：

• 移除Grid容器上的align-items: center，让子项默认拉伸撑满网格单元，自动实现等高
• 给每个Grid直接子项设置Flex布局，单独控制子项内部的内容垂直居中，替代原容器上的居中属性
• 保留原有的边框设置逻辑即可

修正后的完整CSS代码如下：

.sort-count-filter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 3%;
    font-family: "Open Sans";
    justify-content: center;
    /* 移除 align-items: center，默认stretch让子项等高 */
    border-top: 1px solid black;
    border-left: 1px solid black;
}
.sort-count-filter > div {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    /* 子项设为flex，实现内部内容垂直居中 */
    display: flex;
    align-items: center;
    /* 可选：按需加内边距，避免内容贴在边框上 */
    padding: 12px 16px;
    /* 可选：如果需要内容水平居中，加上 justify-content: center 即可 */
}

如果不需要最右侧列的右边框、最底部的下边框，可以追加以下规则清除多余边框：

/* 清除最右侧列的右边框 */
.sort-count-filter > div:nth-child(3n) {
    border-right: none;
}
/* 清除最后一行的下边框（当前布局只有1行，三个子项都会命中） */
.sort-count-filter > div:nth-last-child(-n+3) {
    border-bottom: none;
}

调整后所有列的分隔边框会自动和最高列的高度保持一致，不会再出现高度不齐的问题，同时内部内容的垂直居中效果也能保留。

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