① 布局组件
布局组件是容器，是解耦样式的重要方式
上次分享完antd的通用组件源码，这篇文章接着分享一下布局组件。
布局组件其实是非常重要的组件，对于统一的设计风格来说，抽出通用的布局样式，对代码非常友好，不用写太多冗余且不统一的样式。
antd 的布局组件不多，只有几个，下面逐一看下有什么借鉴的思路。
② Divider（分割线）
文章的章节段落分割
严格来说，分割线组件不算是常用的布局组件，只是为了文字内容的划分更清晰，可以先看下基本的效果
简单来说，就是一条横线，然后居中、居左或居右放置想要的内容上去。
如果个人来实现，比较直观的想法，可能就是先画一条线，然后直接将内容绝对定位于对应的位置上。
但是直接 F12 看一下，你会发觉 antd 的实现方式不是这样的。
首先它是分为左边线条，和右边线条，而线条是用了和内容统一高度的容器，显示顶部边框线，然后再做一个相对位置的偏移，可以再看看对应样式：
至于你会奇怪它的线条宽度是怎么计算忽略中间内容的，不用看父容器就知道是用了flex布局了。
左右两边的宽度实际是加起来100%，再根据中间内容位置来设置5%还是50%还是95%。
③ Grid（栅格）
响应式布局的始祖
如果用过Bootstrap框架，那么对栅格组件就不会陌生。
说白了，就是想一份代码跑多种平台，又能根据屏幕大小展示不同的布局。
找到项目的grid组件进去，可以关注一下它是如何做页面响应的，找到对应的引用
进去可以看到封装了一个页面宽度响应式的代码，整体来说，基本是订阅发布的模式
这里主要看一下注册的方法，是调用了matchMedia方法，然后匹配不通的媒体查询条件
这个js方法用得不多，常规我们会直接用css样式的媒体查询直接写不同样式。
所以可以看下MDN的用法，也是很简单，匹配媒体查询的字符串，然后监听变化就可以了。
没必要监听页面的 resize 事件再节流获取页面宽度，而且 matchMedia 会在边界值变化时候才触发一次。
然后再看看每个栅格对应的宽度是如何设置的。
看下 col.tsx 代码可以知道，其实就是根据从 1 到 24 列，定义对应的宽度类
再看下 style/mixin.less，就可以知道宽度就是less用函数计算出来的各列类名和对应的百分比，不懂less语法可以去复习一下，也很简单。
④ Layout（布局）
Layout才是真正的布局组件
其实不知道为啥 antd 布局类下面又一个布局组件，可能总的组件分类名称没想好。
不过确实这个Layout才是我们常写的布局组件，相当于一个容器，放进来你想要的内容，同时兼顾不同小模块之间的响应。
其实这个组件没有十分的看点，最多可以看下页面响应的Sider控制宽度的代码，这里不展开了。
⑤ Space（间距）
间距组件其实有点鸡肋
间距组件的用途是，当你放很多东西在一列的时候，如何简单控制各自的间距。
就像排排坐一样，不用你来一个一个来控制和后面的距离。
找到space组件的代码，可以看到它用到了一个 useFlexGapSupport 的 hook，找到源码看到它用了一个 styleChecker 的方法：
这里它作用就是渲染一个实际节点，看是否支持 flexGap 属性。
查查 caniuse，可以知道，column-gap 和 row-gap 是有兼容性问题的。
所以不兼容的地方，它是有另外的处理。
处理方式在 space/Item.tsx，我们都很容易知道了，就是看 gap 的方向来设置左右 margin 和上下 padding。
至于怎样处理各节点的，自然就是遍历 chilNodes 了。
