Material UI为何采用display flex而非display grid实现栅格系统？

栅格系统通过Grid组件实现，其采用CSS的Flexible Box模块以实现高灵活性。

Material UI 最初选用flex而非grid作为栅格底层实现，主要有以下几个原因： #

• 历史兼容性考量
  Material UI首个稳定版本发布时，CSS Grid的浏览器支持度还远未普及，尤其是面向需要兼容IE11等老旧浏览器的To B业务场景，Flex的兼容性表现更加成熟稳定，是当时风险更低的技术选型。目前Material UI v5及之后的版本已经推出了基于CSS Grid实现的Grid2组件，供有复杂二维布局需求的开发者选用，旧的Flex版Grid也保留了下来做向后兼容。
• 现有生态的迁移成本
  早期Material UI的栅格API完全是基于Flex的特性设计的，包括xs/sm/md等断点宽度配置、间距（spacing）、对齐属性等逻辑都和Flex深度绑定，如果直接将底层替换为Grid，会导致存量项目升级时出现大面积布局异常，迁移成本极高，不符合框架的版本兼容性承诺。
• 常规场景的适配性更高
  绝大多数业务场景下的栅格需求都是一维的“行-列”排列，Flex本身就是为一维布局设计的，实现这类需求逻辑更简单、运行开销更低，CSS Grid的优势在复杂二维布局场景才能体现，对于通用栅格组件来说，Flex的能力已经可以覆盖绝大多数用户需求。
• 灵活度适配定制需求
  Flex实现的栅格可以更便捷的实现内容自适应宽度、自动换行、不规则对齐等定制需求，不需要额外配置Grid的轨道尺寸等参数，对于新手开发者来说上手门槛更低，也符合Material UI开箱即用的设计原则。

内容的提问来源于stack exchange，提问作者Dev Raj Singh