antd源码分析之——栅格（Grid）

官方文档 https://ant.design/components/grid-cn/

 

目录

1、antd中的Grid

　　代码目录

　　一、总体思路

　　二、less文件结构图（♦♦♦重要）

　　3、less实现逻辑图（♦♦♦重要）

　　四、源码节选：antd/components/grid/style/mixin.less

　　五、源码节选：antd/components/grid/col.tsx

 

1、antd中的Grid

Grid没有使用React 底层基础组件。Grid的特色在于css样式的控制，本次着重对css结构进行了梳理

代码目录

一、总体实现思路

col

• less负责生成 ant-col-1 到 ant-col-24 的样式
• 组件tsx中负责根据父组件传入的props属性，生成本身使用的class名称

row

• 处理不一样size下处理整行宽度
• 处理间距gutter

二、css文件结构图

三、col中less实现逻辑图

 

 

 四、源码节选：antd/components/grid/style/mixin.less

 

 

 五、源码节选：antd/components/grid/col.tsx