如何在所有设备上实现含指定宽高子组件的3x3网格布局？

优先选择Grid布局实现，可同时满足保留子组件固定宽高、全设备严格保持3x3布局的需求，无需依赖百分比宽度破坏子组件尺寸设定。 #

React Native 适配方案（匹配你提供的样式写法） #

容器样式调整 #

RN 0.52及以上版本原生支持Grid布局属性，直接替换原有flex相关配置即可：

compContainer: {
    alignSelf: 'center',
    display: 'grid',
    // 固定3列，每列宽度和子组件宽度保持一致
    gridTemplateColumns: `repeat(3, ${isSDevice ? 45 : 60}px)`,
    // 每行高度和子组件高度保持一致
    gridAutoRows: `${isSDevice ? 45 : 60}px`,
    // 可自定义行列间距，不需要就设为0
    gap: 8px
}

子组件样式无需修改 #

你原本写的childComps样式可以完全保留，Grid布局会自动将子组件分配到对应格子中，不会挤压或拉伸子组件的固定宽高。 #

低版本RN Flex兼容方案 #

如果你的RN版本不支持Grid属性，调整容器宽度计算逻辑即可实现：
容器宽度固定为3*子组件宽度 + 2*自定义间距，保证每行刚好放下3个子组件，不会出现换行错乱：

const childWidth = isSDevice ? 45 : 60
const customGap = 15 // 可自行调整间距大小，不需要设为0即可
compContainer: {
    alignSelf: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: 3 * childWidth + 2 * customGap,
    rowGap: customGap,
    columnGap: customGap
}

Web端CSS实现方案 #

/* 容器样式 */
.compContainer {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-auto-rows: 60px;
    gap: 8px;
}
/* 小屏适配 */
@media (max-width: 375px) {
    .compContainer {
        grid-template-columns: repeat(3, 45px);
        grid-auto-rows: 45px;
    }
}
/* 子组件样式 */
.childComps {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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