ant design中的栅格化系统

antd design在原12栅格系统的基础上，将整个设计区域进行24等分，Row代表行，Col代表列

通过Row的gutter属性设置Col与Col之间的间隔，响应式设置 { xs:8,sm:16,md:24,lg:32}

将内容放在Col中，只有Col可以作为Row的直接元素，将每个Row（每行）平均分成24份，在每个Col中通过span={}或响应式进行圈地

如果一个Row中的Col的总和超过24，超出的的Col会作为一个整体另起一行排列

<Row gutter={{ xs:8,sm:16,md:24 }}>

　　<Col sm={12} md={8} lg={6} xl={6}></Col>

　　<Col sm={12} md={8} lg={6} xl={6}></Col>

　　<Col sm={12} md={8} lg={6} xl={6}></Col>

　　<Col sm={12} md={8} lg={6} xl={6}></Col>

</Row>

 

转载于:https://www.cnblogs.com/luxiaot/p/11251238.html