如何使用AntDesign的栅格系统

Ant Design的栅格系统是基于flex布局的，使用起来非常简单。以下是一个简单的示例：

import { Row, Col } from 'antd';

const GridExample = () => (
  <Row>
    <Col span={12}>col-12</Col>
    <Col span={12}>col-12</Col>
  </Row>
);

export default GridExample;

在上面的示例中，我们使用了Row和Col组件来创建一个简单的栅格布局。Row组件表示行，Col组件表示列，通过给Col组件的span属性设置不同的值来控制列的宽度。在这个例子中，我们创建了两列，每一列的宽度为12个栅格单位，所以它们会平分一行的宽度。

Ant Design的栅格系统还支持响应式设计，你可以通过设置xs、sm、md、lg、xl和xxl属性来定义不同屏幕尺寸下的布局。例如：

<Row>
  <Col xs={24} sm={12} md={8} lg={6} xl={4} xxl={2}>Responsive</Col>
  <Col xs={24} sm={12} md={16} lg={18} xl={20} xxl={22}>Responsive</Col>
</Row>

通过灵活地使用Row和Col组件，你可以很容易地创建出各种复杂的布局。详细的使用方法和属性可以查阅Ant Design的文档：https://ant.design/components/grid/。