Skip to content
On this page

Grid 栅格

布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来

何时使用

  • 当需要对页面或者区块进行分栏布局时使用。

Row 栅格行

栅格行

示例

待补充

组件属性

属性说明类型默认值
rowGutter列间距number0
columnGutter行间距number0
align垂直对齐方式top,middle,bottomtop
justify水平排列方式start,end,end,space-around,space-betweenstart
wrap自动换行booleantrue

Column 栅格列

栅格列

示例

待补充

组件属性

属性说明类型默认值
offset栅格左侧的间隔格数,间隔内不可以有栅格number0
order栅格顺序,flex 布局模式下有效number0
pull栅格向左移动格数number0
push栅格向右移动格数number0
span栅格占位格数,为 0 时相当于 display: nonenumber12
xxxl≥2000px 响应式栅格,可为栅格数或一个包含其他属性的对象number-
xs<576px 响应式栅格,可为栅格数或一个包含其他属性的对象number-
sm≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象number-
md≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象number-
lg≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象number-
xl≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象number-
xxl≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象number-

Released under the MIT License.