ant design中的栅格化系统

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

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

将内容放在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>ant

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

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

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

</Row>

相关文章
相关标签/搜索