是否T-design react里的排版组件过时了？

[lio-mengxiang]

T-design有两个排版用组件（Grid组件和Space组件），从阿里的ant，fusion，字节的arco，semi，国外的Material UI，都有，你可能觉得我说它们过时了，是不是来搞笑的。。。请容我慢慢道来

首先T-design和现在组件库基本都放弃了ie，面向现代浏览器，以前要兼容ie的时候，最好的布局莫过于flex布局，可是面向现代浏览器最好的布局api莫过于grid。

所以基本上T-deisgn完全可以封装一个好用的基于grid布局的排版组件，这样T-design也算区别于其他组件库的一个特性了。有人会说grid组件库开箱即用还需要封装吗，是的，内置一些默认参数，把css的配置下沉到组件库，

期待T-deisgn新增这个组件呢，嘻嘻

举一个例子

如下图三种这样的排版，grid布局非常轻松，封装后的组件，就写几行代码就实现了,这是第一张图的代码（在线代码案例在下面有连接）

<Grid columns={3} height={200}>
        <Cell center middle style={cellStyle}>
          Top Left
        </Cell>
        <Cell center middle style={cellStyle} left={3}>
          Top Right
        </Cell>
        <Cell center middle style={cellStyle} left={2} top={2}>
          Middle
        </Cell>
        <Cell center middle style={cellStyle} top={3}>
          Bottom Left
        </Cell>
        <Cell center middle style={cellStyle} top={3} left={3}>
          Bottom Right
        </Cell>
      </Grid>

这是第二张图的代码

const rows = (counts) =>
  flatMap(counts, (number) =>
    range(number).map((i) => (
      <Cell
        center
        middle
        style={cellStyle}
        width={12 / number}
        key={`${number}_${i}`}
      >
        {i + 1}/{number}
      </Cell>
    ))
  );

const TraditionalGrid = () => (
  <article>
    <Grid columns={12} minRowHeight="45px">
      {rows([12, 6, 4, 2, 1])}
    </Grid>
  </article>
);

这三种图代码实现，在线案例和GridLayout布局组件的代码如下：
https://codesandbox.io/s/amazing-carson-p5c2tg?file=/src/App.js:252-671

[lio-mengxiang]

我仔细看过字节那边发布的组件库，我也贡献过一点点代码，我觉得他们更多的是走ant的老路，在创新和打破常规上远远不及tdesign-react，超越只有从打破常规开始，t-deisgn加油！

[honkinglin]

我仔细看过字节那边发布的组件库，我也贡献过一点点代码，我觉得他们更多的是走ant的老路，在创新和打破常规上远远不及tdesign-react，超越只有从打破常规开始，t-deisgn加油！

感谢你提供了个有建设性的意见，我看了下你的 codesandbox 代码主要还是通过 grid 布局来实现的
在浏览器标准中，flex 是 13 年左右得到了广泛推广，而 grid 则是 17 年才被众多浏览器实现，也导致了大家了解 flex 布局会更多点，目前使用 flex 布局实现 grid 组件也是为了减少了开发者一些学习成本
当初实现组件考虑更多的也是以实用性为主，并且绝大部分 grid 布局也是可以通过 flex 来实现的，所以可能还需要再讨论下 grid 布局的应用场景是否更通用化些